Monday 23 February 2015

Example of cascading drop down with multiselect checkbox in MVC

@model MvcApplication3.ViewModel.CSVM

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>CSVM</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.CID)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(m => m.CID, new SelectList(Model.CDETAILS, "CID", "CNAME"), "Select", new {@style="width:180px" })
            @Html.ValidationMessageFor(model => model.CID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.SIDDETAILS)
        </div>
        <div class="editor-field">
            <div id="dv">
                @Html.ListBoxFor(model => Model.SID, new MultiSelectList(Model.SDETAILS, "SID", "SNAME"))
            </div>
            @Html.ValidationMessageFor(model => model.SIDDETAILS)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('#SID').multiselect();
        $('#CID').change(function ()
        {
            $.getJSON('@Url.Action("Gets")', { CID: $('#CID').val() }, function (data)
            {
                $('#dv').html("<select id='scid'></select>")
                $.each(data, function (i, j)
                {
                    $('#scid').append($('<option>').text(j.SNAME).attr("value", j.SID));
                });
                $('#scid').multiselect();
                $('#scid').multiselect("uncheckAll");
            });
         
        });
    });
    </script>
}

Tuesday 3 February 2015

how to handel validation in jquery in MVC

$('#create-project-alias-submit').live('click', function () {
    var form = $(this).closest('form');
    var projectid = $('input[name="CreateProjectAlias.ProjectID"]').val();
    $(form).validate().settings.submitHandler = function (form) {
        $.ajax({
            type: "POST",
            url: form.action,
            data: {
                AliasName: $('input[name="CreateProjectAlias.AliasName"]').val(),
                ProjectID: projectid
            },
            traditional: true,
            success: function (result) {
                if (result.success) {
                    // update site alias grid
                    $('span#ProjectAliasesCount' + projectid).html(result.totalCount);
                    var grid1 = $("#ProjectAliases_" + projectid).data("tGrid");
                    grid1.rebind({ projectId: projectid });
                    $('#AddProjectAliasWindow').data('tWindow').close();
                }
                RemoveInterruptMessage();
            },
            error: function (req, status, error) {
                RemoveInterruptMessage();
                alert("The server encountered an error");
            }
        });
    };
    $(form).submit();
});