如何在保存部分視圖後保留在同一頁面

Question

我有一個ajax請求，對於局部視圖工作正常，並獲取我需要用戶編輯的信息，現在當用戶按下保存按鈕數據保存但它它保持重定向到不存在的CameraInfo/Index，是否可以保存並保留在同一頁面上？甚至返回到主頁，如果它不可能？下面的方法在HTTP發佈involded並獲取代碼涉及

AJAX

$(document).ready(function() { 
     $('#qr-number').on('change', function() { 
      $.ajax({ 
       type: "Get", 
       url: '/CameraInfo/Edit', 
       data: { id: $('#qr-number').val() }, 
       success: function (response) { 
        $('#Sample').html(response); 
       }, 
       error: function (response) { 
        if (response.responseText != "") { 
         alert(response.responseText); 
         alert("Some thing wrong.."); 
        } 
       } 
      }); 
     }); 
    }); 

_CameraInfo.cshtml（局部視圖）

@model JobTracker.Models.Job 


<h2>Edit and Confirm</h2> 

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

<fieldset> 
    <legend>Job</legend> 

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

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

    <div class="editor-label"> 
     @Html.LabelFor(model => model.LocationID, "Location") 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownList("LocationID", String.Empty) 
     @Html.ValidationMessageFor(model => model.LocationID) 
    </div><br /> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.HighPriority) 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownListFor(model => model.HighPriority, new SelectList(
    new[] 
    { 
     new { Value = "Yes", Text = "Yes" }, 
     new { Value = "No", Text = "No" }, 
    }, 
    "Value", 
    "Text", 
    Model 
)) 

     @Html.ValidationMessageFor(model => model.HighPriority) 
    </div><br /> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Comments) 
    </div> 
    <div class="editor-field"> 
     @Html.TextAreaFor(model => model.Comments) 
     @Html.ValidationMessageFor(model => model.Comments) 
    </div><br /> 

     <div class="editor-label"> 
     @Html.LabelFor(model => model.Status) 
    </div> 
    <div class="editor-field"> 
      @Html.DropDownListFor(model => model.Status, new SelectList(
    new[] 
    { 
     new { Value = "In Progress", Text = "In Progress" }, 
     new { Value = "Completed", Text = "Completed" }, 
     new { Value = "Not Started", Text = "Not Started" }, 
     new { Value = "Stopped", Text = "Stopped" }, 
    }, 
    "Value", 
    "Text", 
    Model 
)) 
     @Html.ValidationMessageFor(model => model.Status) 
    </div><br /> 

    <p> 
     <input type="submit" value="Save" /> 
    </p> 
</fieldset> 

}

CameraInfo.cs

 [HttpGet] 
    public ActionResult Edit(int id = 0) 
    { 
     Job job = db.Jobs.Find(id); 

     ViewBag.LocationID = new SelectList(db.Locations, "LocationID", "LocationName", job.LocationID); 


     return PartialView("_CameraInfo", job); 
    } 


    [HttpPost] 
    public ActionResult Edit(Job job) 
    { 
     if (ModelState.IsValid) 
     { 
      var LastUpdated = System.DateTime.Now; 
      job.LastUpdated = LastUpdated; 
      db.Entry(job).State = EntityState.Modified; 
      db.SaveChanges(); 
     } 
     ViewBag.LocationID = new SelectList(db.Locations, "LocationID", "LocationName", job.LocationID); 

     return View(job); 
    } 

Answer 1

如果是AJAX調用，用戶不應該導航。很有可能違規代碼在視圖中，可能是發佈到URL而不是執行AJAX調用的表單。

編輯：現在你已經顯示了視圖代碼，我的懷疑被證實。您不應該使用常規表單，因爲這會讓用戶在POST值時導航。另一種方法是使用AjaxForms而不是常規形式。另一種方法是阻止表單提交併通過JavaScript自行提交這些值。

我實際上對最後一個建議是：使用JavaScript提交，但保留表單。因此，如果目標受衆中的某個人可能禁用了JavaScript，則可以使用常規POST和用戶導航來設計該功能。如果他們這樣做，則可以通過在表單的提交事件上返回false來避免導航。