Prevent from ajax call in MVC

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

"... i have another feilds in the form that needs to be submitted, please help me how can i prevent the ajax call from submitting values." So you need fields submitted or you are trying to prevent fields from being submitted.... which is it? — zgood
– zgood, Commented Sep 2, 2014 at 15:42
I think maybe your Create Action to be a JsonResult and return json back to your page instead of the RedirectToAction you currently have. — zgood
– zgood, Commented Sep 2, 2014 at 15:57
Try looking here about the JsonResult. If you return json instead of redirecting your fields won't go blank — zgood
– zgood, Commented Sep 2, 2014 at 19:01

user3559349 · Accepted Answer · 2014-09-03 12:08:12Z

1

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 () {...

answered Sep 3, 2014 at 12:08

user3559349

Sign up to request clarification or add additional context in comments.

Comments

Andrei Dvoynos · Accepted Answer · 2014-09-02 16:39:10Z

0

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

edited Sep 2, 2014 at 16:39

answered Sep 2, 2014 at 16:29

Andrei Dvoynos

1,1431 gold badge10 silver badges33 bronze badges

4 Comments

Jot Dhaliwal Over a year ago

ok understand what are you saying as you can see my above code i have no success function, or i have to place all my ajaxy code into that function

zgood Over a year ago

The Ajax MVC helper doesn't work that great. It would be best to write your own ajax call. The Ajax helper relies on an old version of jQuery (1.5.1), jQuery unobtrusive lib, and a Microsoft ajax lib that is no longer supported. It need jQuery 1.5.1 because the unsupported Microsoft ajax lib relies on live instead of on

Andrei Dvoynos Over a year ago

@zgood Latest version i found of microsoft ajax libs was 3.2.2, released with MVC 5.1. I find it very hard to believe that they still depend on an old version of jquery, where are you getting this from?

Andrei Dvoynos Over a year ago

@zgood Latest version depends on jquery 1.8, anything else I might be missing?

Collectives™ on Stack Overflow

Prevent from ajax call in MVC

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related