如何防止页面被刷新？

Question

我的页面上有DropDownList 和一个提交按钮。 DropDownList具有数据库中的数据列表，在从下拉列表中选择值然后单击提交按钮时，我在主视图页面的部分视图中获取所选下拉列表值的记录数。我的代码给出了正确的输出。我已经通过模型将视图绑定到控制器。使用 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));
        }

Answer 1

您可以使用 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
    }
});