Question

我接下来的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)，它将再次运行搜索并再次重新注册两个单击事件。这是一个好的解决方案吗？

Answer 1

这是我的两个建议。

首先，您可以使用它，它对我来说可以返回部分视图

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

第二例如，与其在局部视图上注册事件，不如在事件局部视图中以JS内联包含事件，例如

如果您希望在sendSms按钮上附加click事件，因为它是一个按钮，所以它可以显示在类似

的视图上

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

那样，现在您就可以在父页面上编写函数

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

MVC PartialView onclick事件第一次起作用，然后不起作用

1 个答案: