防止在MVC中进行Ajax调用

Question

Hi i am making my project in the asp.net,

basic expected behaviour -- fill form name , select master module(dropdown), select sub modules(dropdown), ajax passes id of submodule dropdown, create(submit).. it will submit all values,

now code is behaves---- fill form name, select master and submodule, while selecting submodule from second dropdown is calling the ajax call, and create action is called, so the form name and masterID(that is extracted from first dropdown) gone blank... so i need to prevent the ajax call to call the controller

Myform in razor view

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

    <fieldset>
        <legend>Form</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.FormName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FormName)
            @Html.ValidationMessageFor(model => model.FormName)
        </div>

        <select id="State" name="state"></select><br />
        <p>
            <input id="sbmt" type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

My ajax call

 $('#State').change(function () {
            var a = $('#State').val();
            var token = $('[name=__RequestVerificationToken]').val();
            $.ajax({
                url: "/form/create",
                type: "POST",
                data: { __RequestVerificationToken: token, 'SubID': a }
            });

        });

My controller

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Form form,  int SubID)
        {
            if (ModelState.IsValid)
            {
                form.CreatedBy = 1;
                form.SubId = SubID;
               form.CreatedDate = DateTime.Now;
                form.ModifyBy = 1;
                form.ModifyDate = DateTime.Now;
                form.IsActive = true;
                form.IsDeleted = false;
                db.Forms.Add(form);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.MasterID = new SelectList(db.Departments, "MasterId", "ModuleName", form.MasterID);
            return View(form);
        }

Answer 1

I guess the easiest way for you would be to use MVC's ajax helpers. Change your form like so:

@using (Ajax.BeginForm("Create", "Home", null, new AjaxOptions { OnSuccess = "OnSuccess" }))
{
...

And afterwards add a javascript handler for onsuccess

function OnSuccess(){
   alert("success");
}

This is barely functional code just to get you started.

PS. Make sure you add a reference to ~/Scripts/jquery.unobtrusive-ajax.min.js