2013-02-14 192 views
1

我有我的網頁DropDownList和一個提交按鈕。 DropDownList有來自數據庫的數據列表,並從下拉列表中選擇值,然後單擊提交按鈕,我在主視圖頁面的局部視圖中獲取所選下拉列表值的記錄數。我的代碼給出了正確的輸出。我通過模型將View綁定到控制器。使用html.hiddenfor。 但是,每當我點擊提交按鈕像往常一樣,我的整個頁面得到刷新。但我只需要刷新部分視圖而不是整個頁面。如何防止頁面被刷新?

這是我的代碼工作正常。但通過這個代碼,我的整個頁面正在刷新。我想阻止它。 :

觀點:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    MDLNoDDLIndex 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <script type="text/javascript"> 
     function TestFun() { 
      var mdlno = $("#ddlMDLNo").val(); 
      var txtmdlno = document.getElementById("Request_For_Id"); 
      txtmdlno.value = mdlno; 
     } 
</script> 

<div> 
<h2>Search by MDLNo</h2> 
    <% using (Html.BeginForm()) 
     { %> 

     Select MDLno 

     <%= Html.DropDownList("ddlMDLNo", ViewData["MDLno"] as SelectList, "--Select One--", new { onchange = "TestFun()" })%> 
     <%: Html.HiddenFor(model => model.Request_For_Id) %> 

     <input type="submit" value="search" name="SearchMDLNo" id="btnclick" />  
    <% } %> 
</div> 
<div id="showtable"> //partial view 
<% if (ViewBag.load == true) 
    { %> 
    <%Html.RenderAction("MDLNoDataList"); %> 
<% } %> 
</div> 

</asp:Content> 

控制器:

// Search by mdl no 
     public ActionResult MDLNoDDLIndex() 
     { 
      ViewData["MDLno"] = new SelectList(CRMSearchReportDL.getAllMDLno(), "Request_For_Id", "Request_For_Id"); 
      ViewBag.load = false; 
      return View(); 
     } 

     [HttpPost] 
     public ActionResult MDLNoDDLIndex(CRM_Doctor_Request model) 
     { 
      ViewData["MDLno"] = new SelectList(CRMSearchReportDL.getAllMDLno(), "Request_For_Id", "Request_For_Id",model.Request_For_Id); 
      ViewBag.load = true; 
      return View(); 
     } 


     public ActionResult MDLNoDataList() 
     { 
      List<CRM_Doctor_Request> drlist = new List<CRM_Doctor_Request>(); 
      return PartialView(drlist); 
     } 
     [HttpPost] 
     public ActionResult MDLNoDataList(CRM_Doctor_Request model) 
     { 
      return PartialView(CRMSearchReportDL.getMDLNoWiseDetails(model.Request_For_Id)); 
     } 

回答

2

您可以使用jQuery來爲你做這個。捕獲jQuery中的表單提交,而不是通過瀏覽器執行完整的表單發佈,使用jQuery的.ajax()方法將表單數據提交給控制器操作。

事情是這樣的:

$.ajax({ 
    url: urlToControllerAction, 
    data: { 
     ddlMDLNo: ddlMDLNo, 
     Request_For_Id: Request_For_Id 
    }, 
    type: 'POST', 
    success: function (results) { 
     var partialData = $(results); 
     $('#showtable').html(partialData); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     // do something 
    } 
}); 
+0

但是當我使用AJAX我就不是能夠通過列表下拉到控制器的設定值。您能否請我建議我如何將選定的下拉列表值通過與我在代碼中完成的方式不同的另一種方式傳遞給控制器​​。 – 2013-02-15 04:59:50

+0

@anshu ddlMDLNo在ajax請求中傳遞,請參閱M.Ob代碼的第4行。 – 2013-02-15 08:07:32