Question

第一次一切正常，$(document).ready中的_EditPhoneNBR.cshtml函数调用。

在$(document).ready中，我动态更改文本框的掩码。在_EditPhone.cshtml当我选择国家/地区下拉列表更改时，我调用ajax方法并重新加载_EditPhoneNBR.cshtml并返回我需要更改文本框掩码的数据。

但它不起作用。有没有其他选择我能做到这一点？我尝试了所有可行的方法，没有成功。

_EditPhone.cshtml

 @using (Html.BeginForm(null, null, FormMethod.Post, new { name = "frmPhone", id = "frmPhone" }))
 {
         <tr>
           <td>@Html.Label("Country:", new { @class = "control-label" })</td>
             <td>
                @Html.DropDownListFor(model => model.CommunicationCountry,
                            AppCountryCodeList,
                            "Select",
                                new { htmlAttributes = new { @class = "form-control" } }
                    )                           
                    </td>
                </tr>
                <tr>
                    <td>@Html.Label("Phone Number", new { @class = "control-label" })</td>
                    <td >
                        <div id="DivPhoneNBRContainer">
                            @Html.Partial("_EditPhoneNBR", Model)
                        </div>
                    </td>
                </tr>
}

<script type="text/javascript">

        //jquery is for user select a new country
    $('#CommunicationCountry').change(function(){
             $.ajax({
                    url: 'customer/CountryChange',
                    type: "Get",
                    data: { id: $("#CommunicationCountry").val() },
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    cache: false,
                    success: function (data) {
                        $("#DivPhoneNBRContainer").empty();
                        $('#DivPhoneNBRContainer').html(data);                           
                    },
                    failure: function (errMsg) {
                        alert(errMsg);
                    }
                });            
        });
</script>

_EditPhoneNBR.cshtml

   @Html.TextBox("phonecountrycode", Model.PhoneCountryCode, new { @class = "spe_comm_country", @Readonly = "readonly" })
   @Html.TextBox("Space1", ".", new { @class = "spe_space_10" })
   @Html.TextBox("phoneareacode", Model.PhoneAreaCode, new { @class = "spe_comm_AreaCode" })
   @Html.TextBox("Space2", ".", new { @class = "spe_space_10", @readonly = "readonly" })
   @Html.TextBox("phonenumber", Model.PhoneNumber, new { @class = "spe_comm_phonenumber" })
   @Html.TextBox("Space1", "Ext", new { @class = "spe_space_30", @readonly = "readonly" })
   @Html.TextBox("phoneextension", Model.PhoneExtension, new { @class = "spe_comm_phoneext" })

<script type='text/javascript'>
    $(document).ready(function () {

        var COUNTRY_CODE_format = $("#PHONE_COUNTRY_CODE_format").val();
        var AREA_CODE_format = $("#PHONE_AREA_CODE_format").val();
        var NUMBER_format = $("#PHONE_NUMBER_format").val();  
        var EXTENSION_format = $("#PHONE_EXTENSION_format").val();

        if (COUNTRY_CODE_format != "") {
            $('#phonecountrycode').mask(COUNTRY_CODE_format);
        }
        if (AREA_CODE_format != "") {           
            $('#phoneareacode').mask(AREA_CODE_format);
        }
        if (NUMBER_format != "") {
            $('#phonenumber').mask(NUMBER_format);
        }
        if (EXTENSION_format != ""){
            $('#phoneextension').mask(EXTENSION_format);       
        }
    });
</script>

请帮帮我。

Answer 1

一种方法是将js代码放在函数中的partial中，并在Ajax Get的成功中调用它。部分中的任何函数都应该在“父”中可用，这是我自己使用的一种技术。

在局部视图中：

function initEditPhoneNBR() {
    var COUNTRY_CODE_format = $("#PHONE_COUNTRY_CODE_format").val();
    var AREA_CODE_format = $("#PHONE_AREA_CODE_format").val();
    var NUMBER_format = $("#PHONE_NUMBER_format").val();  
    var EXTENSION_format = $("#PHONE_EXTENSION_format").val();

    if (COUNTRY_CODE_format != "") {
        $('#phonecountrycode').mask(COUNTRY_CODE_format);
    }
    if (AREA_CODE_format != "") {           
        $('#phoneareacode').mask(AREA_CODE_format);
    }
    if (NUMBER_format != "") {
        $('#phonenumber').mask(NUMBER_format);
    }
    if (EXTENSION_format != ""){
        $('#phoneextension').mask(EXTENSION_format);       
    }
}
$(document).ready(function () {
    initEditPhoneNBR();
});

在ajax中，父视图：

$('#CommunicationCountry').change(function(){
         $.ajax({
                url: 'customer/CountryChange',
                type: "Get",
                data: { id: $("#CommunicationCountry").val() },
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                success: function (data) {
                    $("#DivPhoneNBRContainer").empty();
                    $('#DivPhoneNBRContainer').html(data);
                    initEditPhoneNBR();                         
                },
                failure: function (errMsg) {
                    alert(errMsg);
                }
            });            
    });

重新加载partialview后重新执行document.ready

_EditPhone.cshtml

_EditPhoneNBR.cshtml

1 个答案: