Question

I am using MVC 3, c# on IE9
In my controller I have the following 2 ActionResuls that is of significance:

    public ActionResult EditTrain(String trainid)
    {
       ....
       return PartialView(edittrain);
    }


    [HttpPost]
    public ActionResult EditTrain(Train editrain)
    {
       ....
       DataContext.SubmitChanges();      
       return RedirectToAction("Edit", new { id = trainid });                  
    }

On the partial view, I have the following code:

    @model Models.EditTrain
    @{
       ViewBag.Title = "Training";
    }

    <h2>Train</h2>
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "theForm" }))
    {
      @Html.ValidationSummary(false)

      @Html.HiddenFor(model => model.ID)

      <div class="display-label" style="font-weight: normal">
       @Html.Label("ID:")
      </div>
      <div class="display-field">
       @Html.DisplayFor(model => model.ID)
      </div>   

      <div class="display-label" style="font-weight: normal">
        @Html.Label("KitID:")
      </div>
      <div class="display-field">
       @Html.DisplayFor(model => model.KitID)
      </div> 

      <div class="editor-label">
         @Html.Label("Inactive:")
      </div>
      <div class="editor-field">
         @Html.EditorFor(model => model.Inactive)
      </div>    

      <div class="editor-label">
       @Html.Label("Inactive Date:")
     </div>   

     <div id='datepicker' class="editor-field">
       @Html.EditorFor(model => model.InactiveDate)
     </div> 
      ......
      <div style="clear:left;"> 
       <br />         
       <p>
        <input type="submit" id="submit" value="Submit" />
       </p>
      </div> 
    }  

   <script type="text/javascript">

   $.ajaxSetup({ cache: false }); 

   $(document).ready(function () {

     $("#submit").click(function () {

       $.ajax({
               type: "POST",
               url: url,
               data: $('#theForm').serialize()
             });

       $("#stlist").load('@Url.Action("KitsEdit","Spr")' + '?id=' +  '@Model.sprid');

     });
   });

In the above code, what I like to happen above is that once the user clicks on submit, I like it to go to the following action:

    [HttpPost]
    public ActionResult EditTrain(Train editrain) 

and then return back to the View and run the following code

       $("#stlist").load('@Url.Action("KitsEdit","Spr")' + '?id=' +  '@Model.sprid');

What is happening though is that it does the above but after it runs

    $("#stlist").load('@Url.Action("KitsEdit","Spr")' + '?id=' +  '@Model.sprid'); 

it runs

    [HttpPost]
    public ActionResult EditTrain(Train editrain)

a second time.

How can I prevent it from going to

    [HttpPost]
    public ActionResult EditTrain(Train editrain) 

after the .load().

Answer 1

You should return false from your .click() handler. But looking at your code there is something conceptually wrong with it. You call the .load method immediately after firing off your AJAX request without even waiting for this AJAX request to finish. Also there is very little point in invoking a controller action that does a redirect to another action using AJAX.