2

我知道这个问题可能会重复。但我的问题是，我希望在将同一页面上的按钮单击到 div 标签后显示部分视图。当我单击按钮时，部分视图正在显示，但不在 div 标签中的同一页面上，但它在不同页面上打开。这是我的代码：

<%@ 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 src="../../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>

    <script type="text/javascript">
        //script for binding drop down list value from view to model
        function TestFun() 
        {
            var mdlno = $("#ddlMDLNo").val();
            var txtmdlno = document.getElementById("Request_For_Id");
            txtmdlno.value = mdlno;
            //alert(txtmdlno.value);
        }

        //script for loading partial view into div tag "viewlist"
        $(function () {
            $('form').submit(function () {
                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        beforeSend: function () {
                            $("#viewlist").hide();
                        },
                        complete: function () {
                            $("#viewlist").show();
                        },
                        success: function (result) {
                            $("#viewlist").html(result);
                        }
                    });
                }
                return false;
            });
        });

</script>
<div>
<h2>Search by MDLNo</h2>

    <% using (Html.BeginForm("MDLNoDataList", "Search", FormMethod.Post, new { id = "form1" }))
    { %>

         <%: Html.ValidationSummary(true, "Profile Updation was unsuccessful. Please correct the errors and try again.") %>

          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 id="viewlist"></div> // partial view should be loaded here.
    <% } %> 

</div>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
4

3 回答 3

5

试试这样：

$("#btnclick").click(function(){
    $("#viewlist").load("your url here");
});

希望能帮助到你

于 2013-02-14T07:03:53.307 回答
2

Html.BeginForm 做一个完整的页面回发。

请考虑使用Ajax.BeginForm。Ajax.BeginForm 接受 AjaxOptions 类型的参数，该参数具有称为OnSuccess的属性。

您可以向OnSuccess提供一个 javascript 函数以获取结果并将其显示在 div 中

于 2013-02-14T06:49:14.780 回答
1

目前，表单仍在提交并回发到服务器，这就是您在新页面中部分加载的原因。

您需要在提交事件处理程序的顶部使用 preventDefault() 来阻止帖子的发生。

所以...

$('form').submit(function (e) {

            //prevent form post
            e.preventDefault();

            // ajax stuff here
于 2013-02-13T10:39:25.460 回答