javascript - 如何在不刷新页面的情况下使用 ajax/javascript 更新数据库 asp.net mvc

Question

我想通过 WITHOUT 刷新我的页面来将数据库中的 enumdropdownlist 的值从事件更改为非事件？我该怎么做呢？ javascript 方法还是 ajax.beginform？在这里不确定...

我尝试了 ajax.beginform 并且对 Controller 的调用正常，但随后它尝试通过将 View 作为操作结果返回来刷新/呈现 View 。我不希望它刷新 View ，因为我丢失了 View 模型数据。我以为 ajax.beginform 只刷新了表单中的内容？我是否需要在 javascript 方法中执行此操作？我该怎么做才能防止在我的操作方法中刷新/呈现 View ？

这是我的 ajax 表单。如果我返回一个 View ，我将丢失所有“模型” View 数据，因此 model.statusenabled 为空!我不明白为什么它是空的，因为它在 ajaxform 之外...

@if (Model.StatusEnabled)
      {
          using (Ajax.BeginForm("UpdateStatus", "Student", new AjaxOptions
          {
              HttpMethod = "post",
              OnSuccess = "dotcolor();"
          }))
          {
              @Html.EnumDropDownListFor(model => model.Status, new { @class = "btn btn-default btn-lg dropdown-toggle", onchange = "this.form.submit();", id = "enumstatus" })
          }
      }
      else
      {
         @Html.EnumDropDownListFor(model => model.Status, new { @class = "btn btn-default btn-lg dropdown-toggle", disabled = "disabled" })
      }

这是我的操作方法

    [HttpPost]
    public ActionResult UpdateStatus()
    {
        //update database
        // don't return view because it gets refreshed
        // and I have to re pass in my viewmodel
        return View("Edit"); 
    }

如果我在 UpdateStatus() 中将返回类型更改为 void，它仍会尝试返回一个名为 UpdateStatus 的 View 。不是我想要的。

Answer 1

使用 jquery 和 ajax 发布所选值相对容易

HTML

@Html.EnumDropDownListFor(m => m.Status, new { @class = "btn btn-default btn-lg dropdown-toggle" })

脚本

var id = '@Model.ID'; // store the ID of the student (change to suit your property name)
var url = '@Url.Action("UpdateStatus", "Student")';
$('#Status').change(function() {
  var status = $(this).val();
  $.post(url, { ID: id, Status: status }, function(data) {
    // do something with the returned value e.g. display a message?
    // for example - if(data) { // OK } else { // Oops }
  }
}

Controller

[HttpPost]
public ActionResult UpdateStatus(int ID, EmployeeStatus Status) // assumes the enum is typeof EmployeeStatus 
{
  // update the employees status based on the parameters
  return Json(true); // or return Json("some message")
}

请注意，您可能想要检查状态是否确实已更新，例如在 catch block 中您可能 return Json(null) 或 return Json("some error message") 然后您可以使用它在页面上显示消息