MVC 4 - 从视图调用函数并停留在视图上

Question

我正在使用 MVC 4 Web 应用程序连接到我服务器上的 SQL DB。

我有一个包含用户列表（表格）的页面（供管理员控制用户管理），每一行代表一个用户，其中包含以下字段：

1. 用户名
2. 创建日期
3. 角色
4. 电子邮件
5. 状态

每行右侧有3个按钮：

1. 停用
2. 编辑（角色）
3. 删除用户

使用“停用”按钮，用户可以处于活动状态和非活动状态（暂时冻结用户帐户）。

当您按下“停用”按钮时，用户状态更改为“未激活”，按钮值（文本）更改为“激活”，使用 Jquery。

现在我希望能够在单击“激活/停用”按钮以更新数据库时调用函数（服务器端），但我不想调用控制器上的函数并返回相同的视图并强制页面回发，我只想在不更改表示层（更改视图等）的情况下更新数据库，因为我在 Jquery 的帮助下处理表示层。

我该怎么做？

代码：

我的表中有一行：

 <tr>
    <td width="15%">@appUser.name</td>
   <td class="text-left" width="15%">@appUser.date</td>
   <td class="text-left" width="10%">@appUser.role</td>
   <td id="user_email" class="text-left" width="24%">@appUser.email</td>
    @if(appUser.activeStatus)
    {
      <td class="text-left" width="10%"><span id=@Url.Content("status_lbl" + index) class="label label-success">Active</span></td>
      <td class="btn-group-sm text-center ">
        <input id="@Url.Content("freeze_btn" + index)" value="Deactivate" class="btn btn-default" onclick="@Url.Action("SetActive", "Home", new { email = appUser.email, activeStatus = false }) " />

     }
     else
     {
       <td class="text-left" width="10%"><span id=@Url.Content("status_lbl" + index) class="label label-danger">Unactive</span></td>
       <td class="btn-group-sm text-center ">
       <input id="@Url.Content("freeze_btn" + index)"  value="Activate" class="btn btn-default" onclick="@Url.Action("SetActive", "Home", new { email = appUser.email, activeStatus = false }) "  />

     }
  <input type="button" value="Edit" class="btn btn-default " />
  <input type="button" value="Delete" class="btn btn-default " />
   </td>
   </tr>

Jquery：（负责演示）

    $('input[id^=freeze_btn]').click(function (event) {
    var btn = $(event.target);
    var text = $(this).attr('value');
    var newid = $(this).attr('id').replace('freeze_btn', 'status_lbl');
    if (text == "activate ") {
        btn.val("Deactivate");
        $('#' + newid).removeClass("label-danger").addClass("label-success").text("Active");
        $(this).attr('onclick').replace('true', 'false');
    }
    if (text == "Deactivate") {
        btn.val("activate ");
        $('#' + newid).removeClass("label-success").addClass("label-danger").text("Unactive");
        $(this).attr('onclick').replace('false', 'true');
    }  
});

如何使用参数调用函数（代码隐藏）

1. 用户电子邮件（为了在我的数据库中搜索用户
2. “激活/停用”按钮的值（文本）（所以我会知道是激活用户还是停用而不访问数据库以检查用户当前状态，因为我会在页面加载后执行此操作（尚未实施））

并且停留在视图上，没有返回视图只是一个在后台工作的函数更新数据库而已。（这非常重要！）

Answer 1

举例：

在控制器中创建结果操作：

[HttpPost]  
public ActionResult GetSomethingForSomething(Type someModel)  
{            
   // Do what you want
   return Json(your_model, JsonRequestBehavior.DenyGet);
}

并在视图中使用它：

$.ajax({
         url: '/Controller/GetSomethingForSomething',
         type: 'POST',
         data: JSON.stringify(requestData),
         dataType: 'json',
         contentType: 'application/json; charset=utf-8',
         success: function (result) {
            // do success
         },
         error: function (xhr) {
            alert('Error');
         },
         async: true
      });

然后在成功更新你想要的。

另一个例子：http://bobcravens.com/2009/11/ajax-calls-to-asp-net-mvc-action-methods-using-jquery/

Answer 2

您可以使用 AJAX。下面是一个简单的示例，也可能有助于使用 MVC 操作：

var path = '@Url.Action("DoSomethingAction", "DoSomethingController")';
                var paramsObject =
                {
                    Email: .....,
                    IsActive : .....,
                };

                $.post(path, paramsObject, function (result) {
                    if (result.Errors) {
                        $.each(result.Errors, function (index, item) {

                        });
                    }
                    else {

                    }

                }).error(function (error) {
                    alert("Error Occured " + JSON.stringify(error));                    
                });

在服务器端，您有一个动作控制器，它将处理该请求并返回一个 JSON 结果，操作成功与否，甚至出错