2013-07-30 53 views
2

在我的應用程序中,我使用div.load()jquery在我的常見視圖中加載了局部視圖。 我想更新我的分部視圖中的值,並顯示在同一視圖中使用jQuery的局部視圖。是否有任何其他方法或樣本來實施它。在同一視圖中顯示部分視圖mvc4

共視

<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來diaplay鏈接

<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."); 
    }      
    }); 
    } 

我嘗試更新局部視圖值,並顯示在相同的視圖中的局部視圖。 我在使用局部視圖時遇到強大的性能問題。我的代碼中有任何錯誤。 ? 我的方法是錯誤的。?

回答

0

在兩個AccountDetails操作方法中都放置了斷點。
我認爲load方法在請求中使用get方法,而第二個操作方法使用HttpPost屬性進行裝飾。
嘗試使用了jQuery的ajax方法:jQuery.ajax

0

使用此:

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 ... 
}); 
+0

是否有任何其他方法比jQuery來更新局部視圖/後在同一個視圖中顯示,因爲它提供了性能問題。 – kk1076

+1

@ kk1076 - 是的,你可以在你的局部視圖中使用'@ Ajax.BeginForm()'。 – AminSaghi

相關問題