0

嗨朋友们，我正在研究 MVC 4 Razor，我陷入了一种情况，即员工个人详细信息表格要填写步骤（向导）..为此我使用了 jquery 手风琴控件..每一步我都放了一个手风琴。 .每个手风琴部分中的 html 是通过在每次点击相应手风琴（即<h3></h3>标签）时通过 ajax 调用从部分视图呈现的。

在页面加载第一/顶部手风琴默认情况下处于活动状态。我的问题是限制用户点击下一个手风琴，直到他/她正确填充当前活动的手风琴..

这是我的完整代码：

看法：

@model XXX.ViewModels.PersonalDetailsViewModel
@{
    ViewBag.Title = "PersonalDetails";
    Layout = "~/Views/Shared/Template.cshtml";
}
@using (Html.BeginForm("Lifestyle", "Apply", FormMethod.Post, new { id = "personalDetailForm" }))
{
    <div class="centerdiv margin_top20">
        <div class="row">
            @Html.ValidationSummary(true, "Please Correct the following errors:")
        </div>
        <div style="width: 1000px;">
            <div id="Personalaccordion" class="acordion_div" style="padding: 10px; float: left;">
                <h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetBasicDetailsView','personalDetailForm','BasicDetailsDiv');">
                    <p>
                        Basic Details<span id="BasicDetailsDivExp"></span>
                    </p>
                </h3>
                <div id="BasicDetailsDiv">
                </div>
                <h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetPersonalAddressView','personalDetailForm','PersonalAddressDiv');">
                    <p>
                        Address<span id="PersonalAddressDivExp"></span></p>
                </h3>
                <div id="PersonalAddressDiv">
                </div>
            </div>
            <ul id="conlitue_ul" style="margin-top: 20px;">
                <li style="margin-left: 140px;">
                    <input type="submit" class="compareBtn float_lt" value="Continue Buying >" id="continue" /></li>
            </ul>
        </div>
    </div>
}
@Scripts.Render("~/bundles/PersonalDetails")
<script type="text/javascript">

    PersonalModule.GetRenderingView('Apply/GetBasicDetailsView', '', 'BasicDetailsDiv');

</script>

我的控制器：

public ActionResult PersonalDetails(int leadId)
        {
            var personalDetailsViewModel = LeadHelper.GetPersonalDetails(leadId);
            return View(personalDetailsViewModel);
        }

        public ActionResult GetBasicDetailsView(PersonalDetailsViewModel personalDetailsViewModel)
        {
            if (personalDetailsViewModel.BasicDetails == null)
            {
                ModelInitializerHelper.InitilaizeBasicDetailsVModel(personalDetailsViewModel);
            }

            ModelInitializerHelper.InitializeBasicLookup(personalDetailsViewModel);

            return PartialView("Personal/BasicDetails", personalDetailsViewModel);
        }

        public ActionResult GetPersonalAddressView(PersonalDetailsViewModel personalDetailsViewModel)
        {
            if (personalDetailsViewModel.PersonalAddressDetails == null)
            {
                ModelInitializerHelper.IntializePersonalAddressVModel(personalDetailsViewModel);
            }

            ModelInitializerHelper.InitializePersonalAddressLookup(personalDetailsViewModel);

            return PartialView("Personal/PersonalAddress", personalDetailsViewModel);
        }

我的 JS：

var PersonalModule = {

    GetRenderingView: function (url, formId, containerID) {

            var applicationurl = ApplicationRoot + '/' + url;
            var objects = $('#BasicDetailsDivExp , #PersonalAddressDivExp' );
            viewDivID = containerID;           
            GetAccordionView(applicationurl, formId, objects, containerID, 'accordion_plus', 'accordion_minus');

    }
}

GetAccordionView: function (url, formId, objects, containerID, accordion_plus, accordion_minus) {

        var formObjectData = null;
        if (formId != undefined) {
            formObjectData = $("#" + formId).serialize();
        }
        var renderView = function (data) {
            $('#' + containerID).innerHtml = data;
        }
        ExpandAccordion(objects, containerID, accordion_plus, accordion_minus);

        DoServerRequest(url, formObjectData, renderView);

    }

    ExpandAccordion: function (objects, spanIconID, accordion_plus, accordion_minus) {
        var Objects = objects;
        Objects.removeClass(accordion_minus);
        Objects.addClass(accordion_plus);

        $('#' + spanIconID + 'Exp').removeClass(accordion_plus).addClass(accordion_minus);

        if (Browser.ie7) {
            Objects.css("margin-top", "-22px");
        }
    }
 DoServerRequest: function (url, data, funSuccess) {
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            async: false,
            dataType: "json",
            success: funSuccess,
            error: function (errorResponse) {
                if (errorResponse.readyState == 4 && errorResponse.status == 200) {
                    renderCurrentView(errorResponse.responseText)
                }
                else {
                    alert(errorResponse.responseText);
                }
            }
        });
    }

请有人帮忙..我听说过很多关于这个论坛的好消息，这是我的第一个问题...提前谢谢..我已经删除了我的 jquery 验证尝试，因为它使代码变得垃圾现在我不知道该写什么以及在哪里写

4

1 回答 1

0

如果您尝试在页面加载后验证已通过 Ajax 添加到表单的数据，那么您将需要使用规则方法并为这些新元素添加规则。否则，Jquery Validate 无法了解它们。

例子

通过 Ajax 加载新内容后，您需要找到每个元素并向它们添加必要的规则。

$('#yourDiv').find(".newElements").rules("add", {
    required: true,
    messages: {
        required: "Bacon is required"
    }
});

如果您使用的是不显眼的验证，您可能还需要向其中添加新元素。有关更多详细信息，请参阅此SO 问题。

验证表单

要检查字段是否有效，您需要在单击时验证表单。这可以使用.validate()来完成。然后，您可以检查表单是否使用.valid()

例子

$('#yourForm').validate();

if(!$('#yourForm').valid()) {
    alert('Bacon is required');
}
于 2013-06-05T09:27:13.590 回答