将模型传递给j​​avascript和操作问题

时间:2017-05-11 15:51:19

标签: javascript c# asp.net-mvc asp.net-mvc-5 partial-views

我是MVC的新手,我在部分视图方面遇到了很多麻烦。希望有人可以给我一些指导。

我们正在尝试将我们的ASP.Net webforms应用程序移植到MVC。我创建了一个小测试应用程序,试图模仿我们在许多页面上做的事情。基于我找到here的示例代码,我有一个View和Partial视图以及一个包含Partial模型的Model。该视图有一个下拉列表,用于隐藏/显示部分视图。

当用户选择隐藏时,我有一个隐藏局部视图的javascript方法。如果他们选择Visible,则javascript会调用一个操作,我希望能够修改模型并将其发送回视图。我还需要能够在页面上隐藏或显示其他部分视图。在另一种情况下,我需要能够在javascript函数本身内修改TestModel和PartialModel并重新渲染(将更改反映给用户)。

我目前有两件事我无法弄清楚:

  1. 如何在javascript函数中访问模型
  2. 如何将模型来回传递给从模型调用的动作
  3. 现在,代码调用我创建新PartialModel并将其传递回视图的操作。这有效但当我点击保存按钮时," old" PartialModel传递给HTTPPost操作。但是,我需要修改现有模型而不是创建新模型。

    我已经发布了以下代码。任何帮助将不胜感激。

    控制器

    namespace WebApplication1.Controllers
    {
        public class TestController : Controller
        {
            // GET: Test
            public ActionResult Index()
            {
                TestModel tm = new TestModel();
                tm.Vis = Visibility.Visible;
    
                return View(tm);
            }
    
            [HttpPost]
            public ActionResult Index(TestModel tm)
            {
                return View(tm);
            }
    
            public ActionResult DDLChangedAction(int id)
            {
                // I need access to TestModel including TestModel.PartialModel
                var pvm = new PartialModel();
                pvm.PartialInt = 100;
                pvm.PartialString = id.ToString(); ;
                pvm.PartialString2 = "asdf";
    
                ////return PartialView("_PartialTest", pvm,
                ////        new ViewDataDictionary(System.Web.Mvc.Html.HtmlHelper.ViewData)
                ////        {
                ////            TemplateInfo = new TemplateInfo { HtmlFieldPrefix = HtmlHelper.NameFor(m => m.Partial).ToString() }
                ////        });
    
                return PartialView("_PartialTest", pvm);
            }
    
            private ActionResult PartialView(string v, PartialModel pvm, ViewDataDictionary viewDataDictionary)
            {
                throw new NotImplementedException();
            }
        }
    }
    

    模型

    namespace WebApplication1.Models
    {
        public class TestModel
        {
            public TestModel()
            {
                Partial = new PartialModel();
                Partial.PartialInt = 42;
                Partial.PartialString = "partialString text";
                Partial.PartialString2 = "partialString2 text";
            }
    
            public int SelectedItem { get; set; }
    
            public Visibility Vis { get; set; }
    
            public PartialModel Partial { get; set; }
        }
    
        public class PartialModel
        {
            public int PartialInt { get; set; }
            public string PartialString { get; set; }
            public string PartialString2 { get; set; }
        }
    
        public enum Visibility
        {
            Visible = 1,
            Hidden
        }
    }
    

    查看

    <h2>Index</h2>
    
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-horizontal">
            <h4>TestModel</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
               @Html.Label("Visibility", htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                    @Html.DropDownList("Vis", new SelectList(Enum.GetValues(typeof(Visibility))),
                                "Select",
                                new {
                                    @id = "ddlVis",
                                    @class = "form-control"
                                    //onchange = @"ddlChanged();"
                                })
                </div>
                <br />
                @Html.LabelFor(model => model.SelectedItem, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SelectedItem, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.SelectedItem, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div id="partialPlaceHolder">
                @Html.Partial("_PartialTest", Model.Partial,
                        new ViewDataDictionary(Html.ViewData)
                        {
                            TemplateInfo = new TemplateInfo { HtmlFieldPrefix = Html.NameFor(m => m.Partial).ToString() }
                        })
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type="text/javascript">
    
            $('#ddlVis').change(function () {
    
                /* Get the selected value of dropdownlist */
                var selectedID = $(this).val();
                if (selectedID == 1) {
                    // access and modify the model and partial model
                }
    
                if ($('#ddlVis').val() == "Visible") {
                    // I can pass an integer here, but how do I pass in the model to the action?
                    $.get('/Test/DDLChangedAction/' + 123, function (data) {
                        /* data is the pure html returned from action method, load it to your page */
                        $('#partialPlaceHolder').html(data);
                        $('#partialPlaceHolder').show();
                    });
                } else if ($('#ddlVis').val() == "Hidden") {
                    $('#partialPlaceHolder').hide();
                }
            });
    
            function ddlChanged() {
                alert("projectPtIndChanged")
                if ($('#ddlVis').val() == "Hidden") {
                    alert("in hide");
    
                    //debugger;
    
                    $("#divHideTest").hide();
    
                    // now let's show the partial
                    var newString = "Ickle";
                    $.get('/Test/DDLChangedAction' + newString, function (data) {
                        $('#partialPlaceHolder').html(data);
                    });
                } else {
                    alert("in show");
                    $("#divHideTest").show();
                }
            }
        </script>
    }
    

    部分视图

    @model WebApplication1.Models.PartialModel
    
    <div>
        <fieldset>
            <legend>PartialTest</legend>
            <dl class="dl-horizontal">
                <dt>@Html.DisplayNameFor(model => model.PartialInt)</dt>
                <dd>@Html.EditorFor(model => model.PartialInt)</dd>
                <dt>@Html.DisplayNameFor(model => model.PartialString)</dt>
                <dd>@Html.EditorFor(model => model.PartialString)</dd>
                <dt>@Html.DisplayNameFor(model => model.PartialString2)</dt>
                <dd>@Html.EditorFor(model => model.PartialString2)</dd>
            </dl>
        </fieldset>
    </div>
    

0 个答案:

没有答案