问题
I’m new to MVC and I’m having a lot of trouble with Partial Views. Hopefully someone can give me some guidance.
We’re trying to port our ASP.Net webforms app to MVC. I’ve created a little test app to try to mimic what we’re doing on many of our pages. Based on sample code I found here, I have a View and a Partial view and a Model that contains the Partial model. The view has a drop down list that hides/shows the partial view.
When the user selects Hidden, I have a javascript method that hides the partial view. If they select Visible, the javascript makes a call to an action where I want to be able to modify the model and send it back to the view. I will also need to be able to hide or show other partial views on the page. In another scenario, I will need to be able to modify TestModel and PartialModel within the javascript function itself and re-render (have the changes reflected to the user).
I currently have two things I can't figure out:
- How to access the model in the javascript function
- How to pass the model back and forth to the action called from the model
The code, as it stands now, calls the action in which I create a new PartialModel and pass it back to the view. That works but when I click on the save button, the "old" PartialModel is passed to the HTTPPost action. However, I need to modify the existing model and not create a new one.
I've posted the code below. Any help would be greatly appreciated.
Controller
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();
}
}
}
Model
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
}
}
View
<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>
}
Partial View
@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>
来源：https://stackoverflow.com/questions/43920279/passing-model-to-javascript-and-actions-questions