如何使用ajax / javascript更新数据库而不刷新页面asp.net mvc

时间:2015-02-18 23:22:00

标签: javascript jquery ajax asp.net-mvc

我想通过执行ajax调用没有刷新我的页面,在我的数据库中将枚举列表的值从活动更改为非活动状态?我该怎么做呢? javascript方法还是ajax.beginform?这里不确定...

我尝试了ajax.beginform并且调用得到了控制器ok,但之后它尝试通过将其作为actionresult返回来刷新/渲染视图。我不希望它刷新视图,因为我丢失了我的viewmodel数据。我以为ajax.beginform只刷新了表单里面的内容?我需要在javascript方法中执行此操作吗? 如何防止在我的操作方法中刷新/呈现视图?

这是我的ajax表格。如果我返回一个视图,我会丢失所有“模型”视图数据,因此model.statusenabled为null!我不明白为什么它为null因为它在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的视图。不是我想要的。

1 个答案:

答案 0 :(得分:3)

使用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 }
  }
}

控制器

[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")
}

注意,您可能希望检查状态是否确实已更新,例如在可能return Json(null)return Json("some error message")的catch块中,您可以使用它来在页面上显示消息< / p>