在更新第一个局部视图后,如何刷新第二个局部视图?

时间:2013-12-14 16:58:46

标签: ajax asp.net-mvc asp.net-mvc-partialview

我有一个具有局部视图的页面(它是一个登录表单)。单击提交按钮后,它会调用控制器并将该人员记录下来并刷新登录表单以显示他已登录。

我现在需要更新显示登录按钮的屏幕部分,或者如果他已登录,则显示“Hello,Logged In user”

我写了一个部分视图,显示该人是否已登录,但我不知道如何在第一个人成功后调用它。我知道有一个OnSuccess事件,这似乎是我将它连接起来的地方,但我不知道该怎么做。

 @using (Ajax.BeginForm("Login", "Account", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "loginSection", }))
    {
         <div id="loginSection">

        ...form omitted for clarity.  

        <input type="submit" value="Log in" />
         </div>  
     }

这是登录后需要更新的部分视图。

<ul id="menu">
@if (Request.IsAuthenticated)
{
    <text>
    Hello, @User.Identity.Name
    </text>
}
else
{
    <ul>
        <a onclick="openLoginWindow()">Login</a>
        <a onclick="openRegisterWindow()">Register</a>
    </ul>
}

2 个答案:

答案 0 :(得分:0)

不使用Ajax.BeginForm,而是使用普通表单并使用自定义代码进行表单发布,以便您可以根据需要控制成功处理程序

<div id="login">
@using(Html.Beginform())
{
  <input type="text" name="UserName" />
  <input type="text" name="Password" />
  <input type="submit" id="btnLogin" />
}
</div>

和将听取提交按钮单击事件的脚本,并将表单发送给操作方法。

$(function(){

  $("#btnLogin").click(function(e){

     e.preventDefault();
     var _this=$(this);
     var _form=_this.closest("form");
     $.post(_form.attr("action"),_form.serialize(),function(res){
        if(res.Status==="authenticated")
        {
          //Let's hide the login form
          $("#login").hide();
          $("#yourSecondDiv").html(res.PartialViewContent); 
        }
        else 
        {
          alert("Wrong password");
        }
     });

  });
});

因此javascript代码期望从控制器操作

获得如下所示的JSON结构
{
  "Status":"Authenticated",
  "PartialViewContent" : "<p>The markup you want to show</p>"
}

PartialViewContent将保留您要向用户显示的标记。

public ActionResult Login(string UserName,string Password)
{
  //to do : Build the JSON and send it back
}

This answer将告诉您如何将JSON属性中部分视图的标记发送给客户端。

答案 1 :(得分:0)

这对我有用:

添加了OnSuccess:

@using (Ajax.BeginForm("Login", "Account", new AjaxOptions { 
        InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "loginSection",
        OnSuccess = "successfulLogin"
    }))
    {... details omitted.

然后补充说:

function successfulLogin() {
    $('#loginPartial').load('Account/LoginLinksPartial');

在控制器中调用:

public ActionResult LoginLinksPartial()
    {
        return PartialView("_LoginLinks");
    }