Question

在我的主页面中，我有一个隐藏的div，我加载了一个包含表格的局部视图。

主视图

 <div id="partial_load" style="display: none;">

</div>

脚本

$('#initCreatePro').click(function () {
var id = $(this).data('assigned-id');
$('#partial_load').show();
$('#partial_load').load('/User/CreatePartial?userid=' + id);
});

到目前为止一直很好，现在在我的局部视图中我有一个带有3个按钮的表单

提交==＆GT;好的没问题
取消==＆GT;我想取消并隐藏div或卸载部分视图
下一页==＆gt;单击时，它将导航到将修改数据的操作，并应使用修改后的数据重新加载部分视图

在部分视图中

<button class="btn" type="button">Cancel</button>
        <a href="@Url.Action("Next", "User", Model)" class="btn btn-success">Next</a>
        <input id="subButon" class="btn btn-primary" type="submit" value="Submit" style=" right: 15px;" />

下一步行动

public ActionResult Next(UserViewModel uvm)
    {
        if (ModelState.IsValid)
        {
            Uow.Users.Add(uvm.User);
            Uow.Commit();

            uvm.User.RecalculateScore();
            return PartialView("_Create", uvm);


        }
    }

当我点击下一个单击时，如何强制隐藏div中的局部视图重新加载新数据，如何在单击取消时隐藏表单并隐藏div

Answer 1

对于“取消”按钮，将html更改为

<button id="cancel" class="btn" type="button">Cancel</button>// add id attribute

并在主视图中添加以下脚本

$('#partial_load').on('click', '#cancel', function() {
    $('#partial_load').empty();
});

附注：您无需在style="display: none;元素中加入<div id="partial_load">，也可以在脚本中删除$('#partial_load').show();。

对于你的“下一步”按钮，它有点不清楚你想要做什么。您当前的代码正在重定向到您的控制器Next()方法并传递原始未更改的模型，并且如果您的UserViewModel模型包含任何属性是复杂对象（属性User似乎是）或集合，绑定将失败。如果绑定确实成功并且您获得了有效的UserViewModel对象，那么您的RecalculateScore()方法建议您更改模型中的属性值，但因为您的模型已添加到ModelState，这些变化不会反映在视图中。

假设您要将表单中已编辑的值提交给保存它并返回不同视图的方法，那么您的代码应该是

<button id="next" type="button" class="btn btn-success">Next</button>

$('#partial_load').on('click', '#next', function() {
    var url = '@Url.Action("Next", "User")';
    var form = $(this).closest('form');
    $.post(url, form.serialize(), function(data) {
        $('#partial_load').html(data);
    });
});

您的方法是POST

[HttpPost]
public ActionResult Next(UserViewModel uvm)
{
    if (ModelState.IsValid)
    {
        ....
        ModelState.Clear();
        return PartialView("_Create", uvm);
    }
    else
    {
        // return the same partial view so that validation errors are displayed
    }
}

附注：不清楚RecalculateScore()方法正在做什么，但使用return Json(someValues);并使用新值更新现有部分可能会更容易。

在主页面内重新加载/取消部分视图

1 个答案: