局部视图刷新后更新模态数据

Question

我在主视图中有一个选择框。 该视图内部有一个局部视图。 当该选择框上的值更改时，我想重新加载局部视图（使用模型中的一些新数据）并使用该新数据更新模态内容。

我可以成功重新加载局部视图，我的问题是模态更新的最佳方法是什么？

我看到的选项：

• 在主视图中定义模态但不知道如何从传递给局部视图的模型中访问数据；
• 在局部视图中定义模态，但这是一个好习惯吗？
• pass the model with all information to the main view, but this way, when the value on the select box changes I need to refresh all the view, and I prefer to reload only the partial view.

Answer 1

我从你的问题中了解到，你有一个主视图，它有一个 SelectList 控件，用于选择你想要更新视图的一部分（局部视图）的 SelectList，对于该部分，你可能正在使用局部视图. 如果是这种情况，请按照以下步骤操作，希望这将有助于您完成任务：

步骤：1：假设这是您的主视图 [MainView.cshtml]

@model yourProjectNameSpace.SomeModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title</h2>

<select id='yourSelectList'>
  <option value="1">Option One</option>
  <option value="2">Option two</option>
</select>

<div id="PartialAreaToUpdate">
    @Html.Partial("_YourPartialView", Model)
</div>

@section scripts
{
<script>
        $('#yourSelectList').change(function () {
            var selectedvalue = $(this).val();
            if (!selectedvalue ) {
                return;
            }
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetYourUpdatedPartial", "YourControllerName")',
                data: { selectedvalue: selectedvalue},
                success: function (response) {
                     $('#PartialAreaToUpdate').html('');
                     $('#PartialAreaToUpdate').html(response);
                }
            });
        });
</script>
}

step.2：你的控制器代码看起来像

    public class YourControllerNameController : Controller
    {
        public ActionResult GetYourUpdatedPartial(string selectedvalue)
        {
            var model = getUpdtedDataFromYOurStor(selectedValue);
            return View("_YourPartialView", model);
        }
    }

步。 3：最后你的局部视图 [_YourPartialView.cshtml]

@model yourModel

your logic of rendering data will go here