时间戳

首页 > 解决方案 > MVC PartialView onclick 事件第一次起作用，然后不起作用

asp.net-mvc - MVC PartialView onclick 事件第一次起作用，然后不起作用

问题描述

我有以下mvc带有 ajax 函数的页面，该页面被调用，search button并且在显示部分视图结果时我正在注册两个 onclick 函数。但是，当我单击sendSms按钮时，它第一次工作，然后它不起作用。我假设这是因为 MVC 部分视图的工作方式，我是否必须以与我#sendSms在下面的searchWebPasReferrals函数中注册相同的方式注册它。但是，必须有更好的方法来实现这一点吗？有人可以指导吗？

父页面

@model IEnumerable<HDWA.VirtualClinicSystem.PL.ViewModels.WebPASReferralViewModel>

@{
ViewBag.Title = "Referral";
}


@using (Html.BeginForm("SendSMSForClients", "SMS", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "sendSMSForm" }))
{

<div class="container">
    <div class="row">
        <div class="col-lg-10">
            <section id="Search">
                <hr />
                <div class="form-group col-md-10">
                    @Html.Label("Specialty", new { @class = "col-md-2 control-label" })
                    @Html.DropDownList("Specialty", (SelectList)ViewBag.Specialty, "- Please select -", new { @class = "form-control" })
                </div>


                </div>

                <br />
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="button" value="Search" class="btn btn-primary" id="searchButton" />
                    </div>
                </div>

            </section>
        </div>
    </div>
</div>
<div class="row">
    <div id="loading" style="display:none" class="col-md-2 col-md-offset-5">
        <img src="~/images/ajax-loader.gif" />
    </div>
</div>



<div id="partial">


    @Html.Partial("_ReferralDetail", Model)
</div>
}
@section Scripts {
<script type="text/javascript">

    $(function () {

        $('#bootStartDate').datetimepicker({
            format: 'DD/MM/YYYY'
        });
        $('#bootEndDate').datetimepicker({

            useCurrent: false, //Important! See issue #1075,
            format: 'DD/MM/YYYY'
        });
        $("#bootStartDate").on("dp.change", function (e) {
            $('#bootEndDate').data("DateTimePicker").minDate(e.date);
        });
        $("#bootEndDate").on("dp.change", function (e) {
            $('#bootStartDate').data("DateTimePicker").maxDate(e.date);
        });


        $.ajaxSetup({
            beforeSend: function () {
                // show gif here, eg:
                $("#loading").show();
            },
            complete: function () {
                // hide gif here, eg:
                $("#loading").hide();
            }
        });

    });

    $('#searchButton').click(function (e) {
        searchReferrals(e);
    });



</script>
}

function searchWebPasReferrals(e) {

    $.ajax({
            url: "/SMS/GetDetails/",
            data: { Specialty: Specialty, Name: Name, Code: Code, Priority: Priority, StartDate: StartDate, EndDate: EndDate },
            cache: false,
            type: "post",
            dataType: "html",
            success: function (result) {
                $('#partial').html("");
                $("#partial").html(result);

                //register the events now because of partial view this has to be registered here or inside the partial view itself. 
                //TODO: should refactor this code for better readability
                $('#checkall').click(function () {
                    var chk = $(this).is(':checked');
                    $('input[type=checkbox]', "#referralData").each(function () {
                        if (chk) {

                            $(this).attr('checked', 'checked');
                        }
                        else {
                            $(this).removeAttr('checked');
                        }
                    });

                });

                $('#sendSMS').click(function () {
                    var formData = $('#sendSMSForm').serialize();
                    $.ajax({
                        type: "POST",
                        url: "/SMS/SendSMSForClients",
                        data: formData, //if you need to post Model data, use this
                        success: function (result) {
                            $("#partial").html(result);
                        }
                    });
                });

            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#partial").html("");
                $('#partial').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                console.log('jqXHR:');
                console.log(jqXHR);
                console.log('textStatus:');
                console.log(textStatus);
                console.log('errorThrown:');
                console.log(errorThrown);
            },
        });

}

- - - - - - - - - 更新 - - - - - -

我找到了一个解决方案，但不确定它是否是一个好的解决方案。在 sendSms 的点击事件中，我调用searchWebPasReferrals(e)成功，它再次运行搜索并再次重新注册两个点击事件。这是一个好的解决方案吗？

标签： asp.net-mvcasp.net-mvc-5

解决方案

这是我的两个建议。

首先你可以使用它，它在返回部分视图时对我有用

$(document).on("click", "#sendSMS", function(e){
    /// Do your stuff
});

其次，不要在局部视图上注册事件，而是将事件包含在具有内联的局部视图中JS，例如

如果你想在 sendSms 按钮上附加一个点击事件，因为它是一个按钮，它可以在视图上，如

<button onclick="DoClick()"><\button>

这样，你现在在你的父页面上编写函数

function DoClick(){
    //do the click actions
}

推荐阅读