ASP MVC 3 ページで、jQuery.toggle()
を使用して、ユーザーがクリックしたかどうかに基づいてテキスト ボックスを非表示および表示しようとしていますcheckbox
。ページが読み込まれると、テキスト ボックスは非表示になります。ほとんどの場合、ユーザーはいくつかの別々のテキスト ボックスに値を入力し、Ajax 呼び出しはそのdiv
要素の.text()
プロパティ内に値を配置します。ユーザーがチェック ボックスをクリックすると、値がdiv
消えてテキスト ボックスが表示されるようにします。
今のところ、div
テキストを表示/再表示させることができます。ただし、textbox
ajax 呼び出しが以前に行われていない場合にのみ表示されます。
Ajax 呼び出しのコードを次に示します。
function getDrmTerritory(zipCode, stateCode, channelName) {
$.ajax({
type: 'POST',
url: '@Url.Action("getTerritory","AgentTransmission")',
data: { zipCode: zipCode, stateCode: stateCode, channelName: channelName },
success: function (data) {
if (data == "") {
alert("No Territory Code for " + channelName + " located in " + stateCode + ", " + zipCode);
$('#territoryName').text("");
$('#Region').val("");
} else {
$('#Region').val(data);
$('#territoryName').text(data);
alert("Territory set to " + data);
window.global = data;
}
},
error: function (data) {
alert("Territory did not get set, please review State/Zip/Market Segment");
}
});
}
そして、ここにありdiv
ます。上記の Ajax 呼び出しは、この時点で非表示になっているため、テキスト自体ではdiv
なく、単にテキストを 内に配置することになっています。textbox
<div class="M-editor-label">
@Html.LabelFor(model => model.Region)
</div>
<div class="M-editor-field" id="territoryName">
@Html.TextBoxFor(model => model.Region, new { style = "display: none;" })
@Html.ValidationMessageFor(model => model.Region)
</div>
この中の をクリックすることcheckbox
でdiv
<div class="M-editor-label">
Override Territory Manually?
</div>
<div class="M-display-field" style="padding-right:190px;padding-top:10px;">
@Html.CheckBoxFor(Model => Model.OverrideRegionInd)
</div>
この.click
関数が呼び出されます (この関数は関数内にありdocument.ready
ます)。このクリック機能により、#Region
TextBoxFor<>
コントロールが再表示されます。ただし、前に述べたように、これはgetDrmTerritory
Ajax 呼び出しが行われていない場合にのみ機能します。
$('#OverrideRegionInd').click(function () {
var region = $.trim($('#territoryName').text());
if (region != "") {
$('#territoryName').text("")
} else {
$('#territoryName').text(window.global);
}
$('#Region').toggle();
});
編集
この.ajaxComplete
呼び出しは、GetChannel()
メソッドの後に毎回呼び出されるため、言及する必要があります。$('#territoryName').text("");
行がページからテキスト ボックスを吹き飛ばしているように見えますが、そのdiv
要素のテキストを消しTextBoxFor<>
、同時にコントロールを維持する方法がわかりません。
$(document).ajaxComplete(function (event, xhr, settings) {
if (settings.url == "/AgentTransmission/GetChannel") {
var channel = $.trim($('#channelName').text());
if ($('#AlignmentM:radio').is(':checked')) {
if ($('#MailingZip').val() != "" && $('#MailingState').val() != "" && channel != "") {
getDrmTerritory($('#MailingZip').val(), $('#MailingState').val(), channel);
} else if (channel != "") {
$('#territoryName').text("");
$('#Region').val("");
}
}
else if ($('#AlignmentL:radio').is(':checked')) {
if ($('#LocationZip').val() != "" && $('#LocationState').val() != "" && channel != "") {
getDrmTerritory($('#LocationZip').val(), $('#LocationState').val(), channel);
} else if (channel != "") {
$('#territoryName').text("");
$('#Region').val("");
}
}
}
});