将复杂类型传递给Bootstrap模式

时间:2016-06-01 15:27:49

标签: javascript c# jquery asp.net-mvc twitter-bootstrap

该项目是ASP MVC 6应用程序。我正在尝试将类对象传递给Bootstrap模式对话框。我阅读了一些文章,描述了如何使用JQuery脚本将数据传递给模式对话框。这些例子涵盖了传递简单数据类型,如int或string值,但我的运气无法获得具有复杂类型的数据类型。

作为一种解决方法,我尝试将类对象序列化为json字符串,并且可以成功将其传递给模式对话框(提供的代码段)。但是,我坚持将json反序列化为ViewModel对象,并使用模态对话框中的对象值进一步更新控件。有人可以提供解决问题的方向吗?

HTML(ASP Razor视图)

<button role="button" data-toggle="modal" data-target="#updateModal" data-dataid=@JsonHelper.SerializeObject(@item) />

JQuery脚本

$("#updateModal").on('show.bs.modal', function (e) {
    var dataid = e.relatedTarget.dataset.dataid;

    //populate the textbox - to test data is passed properly
    $(e.currentTarget).find('textarea[name="dataidval"]').val(dataid);
 });

我是否正在实现我想要的目标?任何更好/替代解决方案?

1 个答案:

答案 0 :(得分:0)

我试了一下,可以实现我想要的。我仍然渴望找到更好的解决方案。我试图解释什么对我有用。

对我有用的解决方案是,对json对象(复杂类型)进行反序列化,并在模态show callback事件中单独将值分配给控件。控件的name属性应与ViewModel类型匹配,以获取表单提交中的值。如果您不希望将复杂类型传递给Action方法,则仍可以将这些值作为控件的名称 - 值对单独提交。

JQuery脚本

$("#updateModal").on('show.bs.modal', function (e) {

    var dataid = e.relatedTarget.dataset.dataid;

    //deserialize json
    var dataObject = JSON.parse(dataid);

    //populate the controls with values        
    $(e.currentTarget).find('input[name="ViewModel.ID"]').val(dataObject.ID);
    $(e.currentTarget).find('input[name="ViewModel.Name"]').val(dataObject.Name);
    $(e.currentTarget).find('input[name="ViewModel.PropertyA"]').val(dataObject.PropertyA);
    $(e.currentTarget).find('input[name="ViewModel.PropertyB"]').val(dataObject.PropertyB);
 });

HTML(bootstrap模式)

<!-- minimal code for the sake of clarity -->
@model ViewModel

<form asp-controller="XYZController" asp-action="@nameof(XYZController.Update)" asp-route-returnurl="@ViewData["ReturnUrl"]"
  method="post" class="form-horizontal" role="form">

  <div class="form-group">

        <input asp-for="@Model.ID" name="ViewModel.ID" class="hidden" />
        <!-- asp-for attributes may not have any effect in this case-->
        <input class="form-control" asp-for="@Model.Name" name="ViewModel.Name" />
        <input class="form-control" asp-for="@Model.PropertyA" name="ViewModel.PropertyA" />
        <input class="form-control" asp-for="@Model.PropertyB" name="ViewModel.PropertyB" />

  </div>
</form>

ASP MVC控制器

    [HttpPost]
    public IActionResult Update(ViewModel viewModel)
    {
        return View();
    }