防止在MVC中进行Ajax调用

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);
        }

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

From the comments, you want to be able to post back the value of the selected state when you submit the form. The best approach would be to use a view model that includes the property SubId and bind your dropdownlist to that property (the SubId parameter in you POST method is then not necessary.

@Html.DropDownListFor(m => m.SubId, ....)

The alternative is to rename the control to SubId so it matches the parameter in your POST method

<select name="SubId" ...>

and delete the unnecessary javascript function $('#State').change(function () {...