このタイトルのトピックはたくさんありますが、問題を解決するのに役立ったものはありません。私はMVCとjQueryを初めて使用するので、私のアプローチには構文的に問題があると思います。どんな助けでも大歓迎です。
ページに上部セクションと下部セクション（両方のdiv）があるWebアプリケーションがあります。私の目標は、上部のdiv（ユーザーリスト）でレコードを選択し、下部のセクションに、ユーザーが回答を入力できるチャレンジ質問のリストを表示することです。以下のリストは、一番上のグリッドで選択されたレコードに基づいてjqueryを使用して挿入されています。これを行うために使用しているコードは次のとおりです。
ビュー-javascript：
function editModeratorSecurity(aPersonId) {
$.ajax({
url: '/Admin/GetAdvSecurity/' + aPersonId,
type: 'POST',
progress: showModSearchProgress(),
success: function (result) {
AdvancedSuccess(result);
},
error: function (result) {
AdvancedFailure(result);
}
});
}
function showModSearchProgress() {
$("#ModeratorDetail").hide();
$("#progressMod").show();
}
function endModProgress() {
$("#progressMod").hide();
$("#ModeratorDetail").show();
}
function AdvancedSuccess(result) {
$('#ModeratorDetail').html(result);
endModProgress();
}
function AdvancedFailure(result) {
endModProgress();
}
コントローラ：
public PartialViewResult GetAdvSecurity(string id)
{
//ID is the iD from the person table
PersonModelBuilder pmb = new PersonModelBuilder(CurrentSession.AccountId);
PersonEditModel pers = pmb.GetPersonToEdit(new Guid(id));
if (pers != null)
{
AdvancedSecurityModel sec = new AdvancedSecurityModel();
UserModelBuilder umb = new UserModelBuilder();
//Need to get the ID from the login table - using the email address
UserModel selUser = umb.CurrentUser(pers.EmailAddress);
//Need to get the challenge questions/answers for the selected users
List<UserQuestionModel> theQ = umb.GetUserChallengeQuestions(selUser.LoginId);
sec.theUser = selUser;
sec.theQuestions = theQ;
return PartialView("_UserChallengeQuestions",sec);
}
else
{
return PartialView("_UserChallengeQuestions", new AdvancedSecurityModel());
}
}
つまり、このコントローラーへの呼び出しは部分ビューを返し、部分ビューで次のコードを使用して質問のリストにデータを入力しています。
@model AdvancedSecurityModel
<form id="frmChallengeQuestions" class="inlineForm">
<div style="min-height: 100px; max-height: 400px;overflow: hidden" >
<table width="100%">
<tr>
<td align="right"><input type="button" value="Save Changes" onclick="ValidateAndSave()"/> </td>
</tr>
<tr>
<td>
@{
string sInstruction = "";
string isChecked="";
string isDisplay = "none";
if (Model.theUser.SecondLevelAuthReqd)
{
isChecked = "checked='true'";
isDisplay = "";
sInstruction = "<br> Please answer <strong>at least 5</strong> of the questions below to set up this feature...";
}
}
2nd Authentication <input type="checkbox" id="2ndAuth" onclick="javascript:ToggleQuestions()" @isChecked/>
<br /> Checking this means that you will be required to answer a random challenge question from the questions you answer in the<br/> list below each time you log in.
<span id="spnExplanation"></span>
<p> </p>
<div id="theQuestionsandAnswers" style="display: @isDisplay; max-height: 175px;overflow-y: scroll" >
<table width="100%">
@{
if (Model.theQuestions != null)
{
int iCount = 0;
foreach (UserQuestionModel ques in Model.theQuestions)
{
string theAnswer = "";
iCount += 1;
if (ques.UserAnswer != null)
{
NLxCommon.Encryption enc = new NLxCommon.Encryption();
theAnswer = enc.Decrypt256(ques.UserAnswer);
enc.Dispose();
enc = null;
}
<tr>
<td width="5%"> </td>
<td>@ques.QuestionText</td>
<td><input id="Answer_@iCount" type="text" value="@theAnswer" /></td>
<td>
<input id="UserQuestionId_@iCount" type="hidden" value="@ques.UserQuestionId">
<input id="QuestionId_@iCount" type="hidden" value="@ques.QuestionId">
<input id="UserId_@iCount" type="hidden" value="@Model.theUser.LoginId">
</td>
<td width="5%"> </td>
</tr>
}
}
}
</table>
</div>
</td>
</tr>
</table>
</div>
</form>
ループでは、コントロールに名前を付けています-input id = "Answer_ @ iCount"-ここで、iCountは質問の番号です-1からxまで。
入力ボタンは、リストされた質問の回答に加えた変更を保存するための試みです。javascript関数を以下に示します。
var numQ = @Model.theQuestions.Count;
function ValidateAndSave() {
var NumAnswers = 0;
for (i=1;i<=numQ;i++) {
var answer = "#Answer_" + i.toString();
var theAnswer = $(answer).val();
if (theAnswer != "") {
NumAnswers += 1;
}
}
if (NumAnswers < 5) {
alert('You must answer at least 5 questions to enable this feature');
return false;
}
//Answered the right number of questions so SAVE
for (j=1;j<=numQ;j++) {
var uAnswer = "#Answer_" + j.toString();
var uUserQid= "#UserQuestionId_" + j.toString();
var uQuestionId= "#QuestionId_" + j.toString();
var uUserId = "#UserId_" + j.toString();
var theUAnswer = $(uAnswer).val();
alert(theUAnswer );
var theuUserQuestionId = $(uUserQid).val();
alert(theuUserQuestionId );
var theuQuestionid = $(uQuestionId).val();
alert(theuQuestionid);
var theuUserId = $(uUserId).val();
alert(theuUserId );
$.ajax({
url: '/admin/savechallengequestion',
type: 'POST',
data: {
UserQuestionId: theuUserQuestionId.toString(),
LoginId: theuUserId.toString(),
QuestionId: theuQuestionid.toString(),
UserAnswer: theUAnswer.toString()
},
contentType: 'application/json; charset=utf-8',
//progress: showModSearchProgress(),
success: insSuccess(data),
error: function () {
alert("error");
}
});
}
}
これに関する私の目標は、トランザクションごとに1つのajax呼び出しを送信して、回答をループすることでした。誰かが1つの呼び出しでこれを行う方法を教えてくれれば、私は喜んで耳を傾けます:)
アラートはすべてポップし、適切なデータを表示しますが、ajax呼び出しに到達すると、progress関数が呼び出されますが、ajax呼び出しがサーバーに到達することはなく、Fiddlerで表示されることもありません。何も起こらなかったようです。コントローラーメソッドと予想されるモデルを以下に示します。コントローラーメソッドはまだ入力されていませんが、まだこれを実行しようとしています。
モデル：
public class UserQuestionModelSave
{
public string UserQuestionId { get; set; }
public string LoginId { get; set; }
public string QuestionId { get; set; }
public string UserAnswer { get; set; }
}
コントローラ：
[HttpPost]
public ActionResult SaveChallengeQuestion(UserQuestionModelSave aQuestionInfo)
{
UserModelBuilder umb = new UserModelBuilder();
if (ModelState.IsValid)
{
try
{
return Json(new { success = true });
}
catch (Exception)
{
return Json(new { success = false });
}
}
return Json(new { success = false });
}
誰かが何かアイデアを持っているなら、私はそれを大いに感謝します-これは今ほぼ2日間私を困惑させました....