Question

在我的应用程序中，我使用div.load（）jquery在我的公共视图中加载了局部视图。我试图更新部分视图中的值，并使用jquery在同一视图中显示部分视图。是否有任何其他方法或样本来实现它。

常见视图

 <body>
    <div class="block-content" style="width: 200px;">
     <ul>
      <li><a id="MyAccount" class="common"><strong>Account Dashboard</strong></a></li>
      <li><a id="AccountDetails" class="common">Account Information</a></li>
      <li><a id="AddressBook" class="common">Address Book</a></li>
      <li><a id="MyOrders" class="common">My Orders</a></li>
    </ul>
    </div>
    <div id="divDynamic" class="order">
    </div>
    </body>

jQuery在点击链接时显示部分视图

<script type="text/javascript">
        $(document).ready(function () {
            $('.common').click(function () {
                var pageid = this.id;
                LoadPartialView(pageid);
            });
        });

        function LoadPartialView(pageid) {
            $("#divDynamic").empty();
            $("#divDynamic").load("/WPindex/" + pageid,
            function (response, status, xhr) {
                if (status == "error") {
                alert("An error occurred while loading the results.");
                }
            });

        }
 </script>

控制器

public ActionResult AccountDetails()
{
  return PartialView(); 
}
[HttpPost]
public ActionResult AccountDetails(string FirstName, string LastName,
string Email, string DOB,string PhoneNo, string Gender)
{
  return PartialView(model);
}

jQuery更新部分视图值并在同一视图中加载局部视图

 $(document).ready(function () {
 $('.button').click(function () {
   LoadPartialView();
 });
 });
 function LoadPartialView() {  
var FirstName = document.getElementById("FirstName").value;
var LastName = document.getElementById("LastName").value;
var Email = document.getElementById("Email").value;
var DOB = document.getElementById("DOB").value;
var PhoneNo = document.getElementById("PhoneNo").value;
var Gender = $('#Gender optionelected').attr('value'); 

 $("#divDynamic").load("/ControllerName/AccountDetails?", { 
 'FirstName': FirstName,'LastName': LastName, 'Email': Email,
 'DOB': DOB, 'PhoneNo': PhoneNo,'Gender':Gender
  },
  function (response, status, xhr) {
   if (status == "error") {
  alert("An error occurred while loading the results.");
   }                     
  });  
  }

我尝试更新部分视图值并在同一视图中显示部分视图。使用局部视图时，我遇到了强烈的性能问题。我的代码中有任何错误。？我的做法是错的吗？

Answer 1

在两个AccountDetails操作方法中放置断点我认为load方法在请求中使用get方法，而第二个action方法用HttpPost属性修饰尝试使用jQuery的ajax方法：jQuery.ajax

Answer 2

使用此：

var myUrl = "/ControllerName/AccountDetails?FirstName=" + FirstName +
    "&LastName=" + LastName + 
    // ... other query strings ...        

$.ajax({
    url: myUrl,        
    success: function (data, textStatus, jqXHR) { 
        $("#divDynamic").html(jqXHR.reponseText); 
    },
    error: function (jqXHR, textStatus, errorThrown) { 
        alert(jqXHR.responesText); 
    }
    // ... any other ajax options ...
});

在同一视图mvc4中显示局部视图

2 个答案: