MVC 4 - 从视图中调用函数并保持视图

时间:2014-08-19 10:34:33

标签: c# jquery html asp.net-mvc razor

我正在使用MVC 4 web app conecct到我服务器上的SQL DB。

我有一个页面(用于管理员来控制用户管理),其中包含一个用户列表(表),每行代表一个带有字段的用户:

  1. 用户名
  2. 创建日期
  3. 作用
  4. 电子邮件
  5. 状态
  6. 每行右侧有3个按钮:

    1. 停用
    2. 编辑(角色)
    3. 删除用户
    4. 用户可以是活跃的& unactive(暂时冻结用户帐户)使用“Deactivate”按钮。

      当您按下“取消激活”按钮时,用户状态将变为“非活动”,按钮值(文本)将变为“活动”,使用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. 按钮“活动/取消激活”的值(文本)(因此我将知道是否激活用户或取消激活而不访问数据库以检查用户当前状态,因为我在页面加载后执行此操作(尚未实施))
      3. 并保持视图,没有返回视图只是一个在bacgground中工作的函数不再更新数据库。(这非常重要!)

2 个答案:

答案 0 :(得分:0)

只是示例:

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

[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/

答案 1 :(得分:0)

您可以使用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 Result,操作是否成功,甚至是错误