从bootstrap 3模态设置模型属性而不回发

时间:2017-08-03 10:05:47

标签: jquery asp.net-mvc-4 twitter-bootstrap-3 bootstrap-modal

我正在尝试使用bootstrap模式从局部视图更新对象模型属性。我可以更新主窗体上的隐藏值,并且可以在回发后在模型属性中看到它,但我想设置该属性值而不回发。背后的原因是我在重新打开模态表单的同时使用了该值但是它没有作为模型可用但尚未回复。

模型要素ID的隐藏控件:

@Html.HiddenFor(model => model.ProjectLocation.FeatureID, new { @id = "featureId" })

部分视图的锚标记:

<a href="@Url.Action("ShowMap", "Map", new { requestId = Model.ID, featureId = Model.ProjectLocation.FeatureID })" class="btn btn-default modal-link" id="startMap" aria-label="Left Align">
      <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>SpecifyLocation
</a>

这是控制器:

public ActionResult ShowMap(string requestId, string featureId)
{
    var model = new MapFeature(requestId);
    model.FeatureID = featureId;

    return PartialView("ShowMap", model);
}

以下是我的部分观点:

@using (Html.BeginForm("ShowMapPost", "Map", FormMethod.Post, new { @id = "frmMap" }))
{
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h4>DrawProjectLocation</h4>
    </div>
    <div class="modal-body">

        @Html.HiddenFor(model => model.FeatureID, new { id = "selectedFeatureID" })
        @Html.HiddenFor(model => model.RequestID)

        <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"  data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">       
            <div id="map" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success" id="submitButton">Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
}
<script>
    $(document).ready(function () {

        var frm = $("#frmMap");
        frm.submit(function (e) {
            e.preventDefault();

            $.ajax({
                url: "@Url.Action("ShowMapPost", "Map")",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    FeatureID: frm.find('#selectedFeatureID').val()
                }),
                success: function (result) {
                    //or simply close our modal.
                    if (result) {
                        $('#modal-container').modal('hide');
                    }
                    else {
                        alert('LocationNotSelected');
                    }
                },
                error: function (result) {
                    alert('error');
                }
            });
        });
    });
</script>

这是我在关闭模态表单时使用的javascript代码:

$('#modal-container').on('hidden.bs.modal', function () {
    var value = $('#selectedFeatureID').val();
    $('#featureId').val(value);

    $(this).removeData('bs.modal');
});

正如你所看到的,我想利用属性&#34; Model.ProjectLocation.FeatureID&#34;但是直到我发回来它才可用。任何帮助将不胜感激。

谢谢

1 个答案:

答案 0 :(得分:0)

最后,我通过为子对象添加一个新的局部视图和在我的控制器上为父对象添加一个get动作来解决它。我将序列化对象传递给此操作并更新了我的局部视图。

以下是我的代码(可能对有相同问题的用户有帮助)

在主视图中渲染部分视图:

@Html.Partial("~/Views/Map/MapOpenPartial.cshtml", Model)

主视图中的Ajax调用:

$.ajax({
   type: 'GET',
   url: '@Url.Action("testMe","MyObject")',
   cache: false,
   data: $("#this_form").serialize(),
   contentType: 'application/json; charset=utf-8',
   success: function (partialViewResult) {
         $("#trShowMap").html(partialViewResult);
   }
});

部分视图:

@model Graafgebiedinformatie.Models.MYOBJECT

@Html.HiddenFor(model => model.ProjectLocation.FeatureID, new { @id = "featureId" })
@Html.HiddenFor(model => model.ProjectLocation.RequestID)

<td>@Html.Label("SpecifyLocation")</td>
<td>
    <a href="@Url.Action("ShowMap", "Map", new { requestId = Model.ProjectLocation.RequestID, featureId = Model.FEATURE_GUID_REF })" class="btn btn-default modal-link" id="startMap" aria-label="Left Align">
        <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> @Graafgebiedinformatie.Globalization.Resources.SpecifyLocation
    </a>
</td>

主控制器上的操作:

public ActionResult testMe(MYOBJECT model)
{
   return PartialView("~/Views/Map/MapOpenPartial.cshtml", model);
}