使用jquery从表单更新数据

时间:2012-08-28 15:20:26

标签: c# asp.net-mvc-3 razor

这个标题有很多主题,但没有一个能帮助我解决我的问题。我是MVC和jQuery的新手,所以我的猜测是我的方法存在语法错误。任何帮助是极大的赞赏。

我有一个Web应用程序,我的页面上有一个上部和下部(两个div)。我的目标是在顶部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()"/>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    @{
                        string sInstruction = "";
                        string isChecked="";
                        string isDisplay = "none";
                        if (Model.theUser.SecondLevelAuthReqd)
                        {
                            isChecked = "checked='true'";
                            isDisplay = "";
                            sInstruction = "<br>&nbsp;Please answer <strong>at least 5</strong> of the questions below to set up this feature...";
                        }
                    }
                    &nbsp; 2nd Authentication&nbsp;&nbsp;<input type="checkbox" id="2ndAuth" onclick="javascript:ToggleQuestions()" @isChecked/>
                    <br />&nbsp;Checking this means that you will be required to answer a random challenge question from the questions you answer in the<br/>&nbsp;list below each time you log in.
                    <span id="spnExplanation"></span>
                    <p>&nbsp;</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%">&nbsp;</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%">&nbsp;</td>
                                        </tr>

                                    }

                                }
                            }
                        </table>                
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>

在循环中,我命名我的控件 - 输入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");
                }
            });
        }


    }

我的目标是遍历答案,每次交易发送一个ajax调用。如果有人可以告诉我如何在一个电话中执行此操作,我愿意倾听:)

警报全部弹出,显示正确的数据,但是当我进入ajax调用时,进程函数被调用,但是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天....

1 个答案:

答案 0 :(得分:0)

如果ajax请求未触发,则应检查控制台是否存在javascript错误。顺便说一句,你的代码中没有“inSuccess()”函数,你可以在这个ajax调用中使用它。