I have a view with multiple sections. i would like to update sections individually using partial views and ajax.
I have this so far:
Controller:
[HttpPost]
public PartialViewResult userdetailssettings(UserDetails model)
{ .... }
View Html:
<div id="userDetailsPartial">
#Html.Partial("_user_details", Model.userdetails)
</div>
Partial Html:
<div class="form-group">
<div class="col-md-12">
#Html.TextBoxFor(x => x.Forename, new { #class = "form-control", placeholder = "Enter your forename" })
#Html.ValidationMessageFor(x => x.Forename)
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.TextBoxFor(x => x.Surname, new { #class = "form-control", placeholder = "Enter your surname" })
#Html.ValidationMessageFor(x => x.Surname)
</div>
</div>
Javascript on View:
var detailsUrl = "#Url.Action("userdetailssettings", "UserLogin")";
var detailsmodel = JSON.stringify(#Html.Raw(Json.Encode(#Model.userdetails)));
$(document).on('click touchstart', '#saveDetails', function () {
$.ajax({
type: "POST",
dataType: 'json',
data: detailsmodel,
url: detailsUrl,
contentType: "application/json"
}).done(function (res) {
$("#userDetailsPartial").html(res);
addresssearch();
});
});
The model is being passed to the controller by the ajax, however the values are not that of the inputs. They are the original values passed from the controller to open the view.
I have tried wrapping the partial in tags and also tried adding form tags inside the partial.
I have also tried putting this code:
var detailsUrl = "#Url.Action("userdetailssettings", "UserLogin")";
var detailsmodel = JSON.stringify(#Html.Raw(Json.Encode(#Model.userdetails)));
Inside the click function.
Nothing I do passes the updated values from the inputs.
I have thought of creating a new instance of the model from the inputs in the javascript i.e.
var detailsmodel = [ { Forename: $('#Forename').val(), Surname: $('#Surname').val() } ];
But if I am just creating json why can I not just convert the bound model to json.
why can I not just convert the bound model to json
This is because you are using MVC, not MVVM.
The "bound model" is one way from the controller to the view via the model; it's possible you're mixing the term "bound model" with "model" and "binding".
If you POST the form, you'll get the model in the Action (based on parameters of course), but if you pass via ajax, you'll need to get the current values from the form (as in your comment 'creating a new instance of the model from the inputs').
You can generate data to pass via AJAX in various ways, such as:
var data = $("form").serialize();
rather than adding every input manually.
var detailsmodel = JSON.stringify... is set when the view is generated and will not change automatically using MVC.
That's because the data you're passing is statically set at page load, based on #Html.Raw(Json.Encode(#Model.userdetails)).
You would need to use something like $form.serialize(), or otherwise create the post body from the actual fields on the page.
Related
I have a partial view on a View of MVC so after Submit the form that is submitting within jquery that you can see below in the code. I have to refresh the Partial view to show some changes that made in partial view after clicking on save button. What should I do in the section of script on click of save?
#using(Html.BeginForm(FormMethod.Post, new{id="form"}))
{
<div>
#Html.Partial("_VehicleCard", Model)
</div>
<div>
<div id="submitBtn" class="row>
#(Model.VehicleCards.Count>0?"":"hidden")">
<div>
<button type="button" id="btnSubmit">Save</button>
</div>
</div>
</div>
}
#section scripts{
<script>
$('#btnSubmit').click(function (event) {
event.preventDefault();
event.stopImmediatePropagation();
$('#form').submit();
//here i wants to refresh Patrial View.
});
</script>
}
Here is my Controller code:
public PartialViewResult GetVehicleForEndMileage(string date, int? Id)
{
try
{
var model = new VehicleEndMilageVM();
DateTime selectedDate;
DateTime.TryParseExact(date, "dd/MM/yyyy", null,
DateTimeStyles.None, out selectedDate);
model.SelectedDate = selectedDate.ToString("dd/MM/yyyy");
model.LocationId = Id ?? 0;
model.VehicleCards =
vehicleDailyInspectionBLL.GetDailyInspectionDetail(selectedDate, Id).Select(x => new VehicleCard
{
VehicleNumber = x.VehicleNumber,
StartMilage = x.StartMilage,
Driver = x.Driver,
EndMilage = x.EndMilage,
VehicleId = x.VehicleId,
VehicleDailyInspectionId = x.VehicleDailyInspectionId,
IsEndMilageAdded = (x.EndMilage !=null && x.EndMilage > 0) ? true : false
}).ToList();
return PartialView("_VehicleCard", model);
}
catch (Exception ex)
{
throw;
}
}
You can simply do it via an ajax call.
First, you have to set an id for <div> tag
<div id="htmlContainer">
#Html.Partial("_VehicleCard", Model)
</div>
Then
$('#btnSubmit').click(function (event) {
event.preventDefault();
event.stopImmediatePropagation();
$('#form').submit();
$.ajax({
url: 'url',
dataType: 'html',
success: function(data) {
$('#htmlContainer').html(data);
}
});
});
You controller seems to be like this :
public PartialViewResult GetVehicleCard(...)
{
return PartialView("_VehicleCard", your view model);
}
HttpPost methods are for SENDING data to the server. You do not need to send your data to the server, rather, you need to GET data from the server with specified criteria and then display it. With that being send, you do not need your HTML.BeginForm() method. Moreover, you do not need to declare a PartialViewResult return type, an ActionResult will suffice. Additionally, you don't need to return the the name of the partial view and the associated model. Simply give the partial view the model results like so:
return PartialView(model)
Next, create an AJAX link on the page you will be clicking your button on like so:
#Ajax.ActionLink("GetVehicleForEndMileage", "Vehicles", new AjaxOptions()
{
HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "Results"
})
<div id="Results"></div>
You can wrap this link in a button tag to work with your current set-up.
Now just define your Partial View in a separate .cshtml file.
#model ModelName
<div>
// Model attributes to be displayed here.
</div>
Now, embed that partial view within the view you wish to have the callback displayed.
Having said all of that, your javascript/jQuery can be removed.
I try to use DevExtreme component in partial view.
But my partial view page shown when I click on the element.
And in the main page after the click I have error
Newtonsoft.Json.JsonSerializationException: Self referencing loop detected for property 'ApplicationEntity' with type 'System.Data.Entity.DynamicProxies.ApplicationEntity_50A6A66F1464C1DE4E8A736E85D88C5AF4F4249EAE26FB21C4F82592E001885D'. Path 'data[0].ApplicationEntity.ApplicationEntityHistories[0]'.
browser console screen
Main page Code:
<div class="row">
<div class="col-md-7">
<button id="btn">CLICK</button
</div>
<div class="col-md-5" id="divPartialViewContainer">
</div>
</div>
<script>
$(document).ready(function () {
$("#btn").on("click", function () {
var text = $(this).text().trim();
if (text.length > 0) {
console.log(text);
$.ajax({
url: '/RiskMap/RiskDetailsPartial/',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ 'param': text }),
success: function (content) {
$('#divPartialViewContainer').html(content);
},
error: function (e)
{
console.log(e);
}
});
}
});
});
</script>
Controller Code
[HttpPost]
public async Task<ActionResult> RiskDetailsPartial(string param)
{
return PartialView("_RiskDetails", new List<Risk>());
}
Partial View code:
#model IEnumerable<Core.Models.Risk>
#using Core.Models
#using Core.ComplexTypes
#{
ViewBag.Title = "Risks";
}
<h2>Risks</h2>
#(Html.DevExtreme().DataGrid<Risk>()
.DataSource(Model)
.Columns(columns =>
{
columns.AddFor(m => m.Id);
columns.AddFor(m => m.Impact);
columns.AddFor(m => m.Probability);
})
)
The message is clear you just need to read it more thoroughly.
Newtonsoft.Json.JsonSerializationException: Self referencing loop
detected for property 'ApplicationEntity' with type
'System.Data.Entity.DynamicProxies.ApplicationEntity_50A6A66F1464C1DE4E8A736E85D88C5AF4F4249EAE26FB21C4F82592E001885D'.
Path 'data[0].ApplicationEntity.ApplicationEntityHistories[0]'.
Json serializer is attempting to serialize some kind of entity(lets call it EntityA) you passed to it, but the problem is that this entity contains another entity(lets call it EntityB) that contains the first entity(EntityA). This is going in circles!
This has also happened to me with my own ORM and I found out the problem is lazy loading. I solved it by adding an interface to each of my entities:
interface IJSonify
{
object Json();
}
Here I simply return an anonymous object. Entity that implements this interface decides how it will represent itself as JSON object.
I had the same problem and I solved it by declaring JsonConvert defaultSettings on webApplication init.
JsonConvert.DefaultSettings = () => new JsonSerializerSettings
{
Formatting = Newtonsoft.Json.Formatting.Indented,
ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
};
Apparently DevExtreme don't use standard ASP.NET MVC json serializer inside DataSourceLoader.Load(..) method, so if you set ASP.NET MVC json serializer ReferenceLoopHandling setting it is not enough.
Another solution is use [JsonIgnore] dataAnnotation above the property that generate the loop reference
I have added a button in my view. When this button is clicked partial view is added. In my form I can add as much partial view as I can. When Submitting this form data I am unable to send all the partial view data to controller.
I have made a different model having all the attributes and I have made a list of that model to my main model. Can anyone please give me some trick so that I can send all the partial view content to my controller?
In My View
<div id="CSQGroup">
</div>
<div>
<input type="button" value="Add Field" id="addField" onclick="addFieldss()" />
</div>
function addFieldss()
{
$.ajax({
url: '#Url.Content("~/AdminProduct/GetColorSizeQty")',
type: 'GET',
success:function(result) {
var newDiv = $(document.createElement("div")).attr("id", 'CSQ' + myCounter);
newDiv.html(result);
newDiv.appendTo("#CSQGroup");
myCounter++;
},
error: function(result) {
alert("Failure");
}
});
}
In My controller
public ActionResult GetColorSizeQty()
{
var data = new AdminProductDetailModel();
data.colorList = commonCore.getallTypeofList("color");
data.sizeList = commonCore.getallTypeofList("size");
return PartialView(data);
}
[HttpPost]
public ActionResult AddDetail(AdminProductDetailModel model)
{
....
}
In my Partial View
#model IKLE.Model.ProductModel.AdminProductDetailModel
<div class="editor-field">
#Html.LabelFor(model => model.fkConfigChoiceCategorySizeId)
#Html.DropDownListFor(model => model.fkConfigChoiceCategorySizeId, Model.sizeList, "--Select Size--")
#Html.ValidationMessageFor(model => model.fkConfigChoiceCategorySizeId)
</div>
<div class="editor-field">
#Html.LabelFor(model => model.fkConfigChoiceCategoryColorId)
#Html.DropDownListFor(model => model.fkConfigChoiceCategoryColorId, Model.colorList, "--Select Color--")
#Html.ValidationMessageFor(model => model.fkConfigChoiceCategoryColorId)
</div>
<div class="editor-field">
#Html.LabelFor(model => model.productTotalQuantity)
#Html.TextBoxFor(model => model.productTotalQuantity)
#Html.ValidationMessageFor(model => model.productTotalQuantity)
</div>
Your problem is that the partial renders html based on a single AdminProductDetailModel object, yet you are trying to post back a collection. When you dynamically add a new object you continue to add duplicate controls that look like <input name="productTotalQuantity" ..> (this is also creating invalid html because of the duplicate id attributes) where as they need to be <input name="[0].productTotalQuantity" ..>, <input name="[1].productTotalQuantity" ..> etc. in order to bind to a collection on post back.
The DefaultModelBinder required that the indexer for collection items start at zero and be consecutive, or that the form values include a Index=someValue where the indexer is someValue (for example <input name="[ABC].productTotalQuantity" ..><input name="Index" value="ABC">. This is explained in detail in Phil Haack's article Model Binding To A List. Using the Index approach is generally better because it also allows you to delete items from the list (otherwise it would be necessary to rename all existing controls so the indexer is consecutive).
Two possible approaches to your issue.
Option 1
Use the BeginItemCollection helper for your partial view. This helper will render a hidden input for the Index value based on a GUID. You need this in both the partial view and the loop where you render existing items. Your partial would look something like
#model IKLE.Model.ProductModel.AdminProductDetailModel
#using(Html.BeginCollectionItem())
{
<div class="editor-field">
#Html.LabelFor(model => model.fkConfigChoiceCategorySizeId)
#Html.DropDownListFor(model => model.fkConfigChoiceCategorySizeId, Model.sizeList, "--Select Size--")
#Html.ValidationMessageFor(model => model.fkConfigChoiceCategorySizeId)
</div>
....
}
Option 2
Manually create the html elements representing a new object with a 'fake' indexer, place them in a hidden container, then in the Add button event, clone the html, update the indexers and Index value and append the cloned elements to the DOM. To make sure the html is correct, create one default object in a for loop and inspect the html it generates. An example of this approach is shown in this answer
<div id="newItem" style="display:none">
<div class="editor-field">
<label for="_#__productTotalQuantity">Quantity</label>
<input type="text" id="_#__productTotalQuantity" name="[#].productTotalQuantity" value />
....
</div>
// more properties of your model
</div>
Note the use of a 'fake' indexer to prevent this one being bound on post back ('#' and '%' wont match up so they are ignored by the DefaultModelBinder)
$('#addField').click(function() {
var index = (new Date()).getTime();
var clone = $('#NewItem').clone();
// Update the indexer and Index value of the clone
clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
$('#yourContainer').append(clone.html());
}
The advantage of option 1 is that you are strongly typing the view to your model, but it means making a call to the server each time you add a new item. The advantage of option 2 is that its all done client side, but if you make any changes to you model (e.g. add a validation attribute to a property) then you also need to manually update the html, making maintenance a bit harder.
Finally, if you are using client side validation (jquery-validate-unobtrusive.js), then you need re-parse the validator each time you add new elements to the DOM as explained in this answer.
$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));
And of course you need to change you POST method to accept a collection
[HttpPost]
public ActionResult AddDetail(IEnumerable<AdminProductDetailModel> model)
{
....
}
I'm very new to MVC and Javascript so please be patient with me, I'm working on small application and I came to part when I need to select something from dropdown list and based on that selection I need to redirect user to another View, I also need to determine somehow where I should redirect user, so that is reason why I tried to pass parameter also ( database ID to my post method) but unfortunatelly this is not working, in section below I will post my code:
Method which is sending data to my DropDownList :
public ActionResult ShowArticleGroup()
{
List<ArticleGroup> articlesGroups = GroupsController.GetAllGroups();
ViewBag.articlesGroups = articlesGroups;
return View(articlesGroups);
}
[HttpPost]
public ActionResult ShowArticleGroup(string id)
{
//Here I wanted to take ID of selected Group and because there will be allways 3 Groups I can do if else and Redirect by ID
if(id =="00000000-0000-0000-0000-000000000002")
{
return RedirectToAction("Create","Article");
}
return RedirectToAction("Create", "Article");
}
And my VIEW - there is only one control on the view : just one dropdown, and based on selection I should be redirected to another view, and I wanted here to take ID of selected group and by that I wanted to redirect user to appropiate view:
#model IEnumerable<Model.ArticleGroup>
#{
ViewBag.Title = "Add new article";
}
<h3 style="text-align:center">Choose article group</h3>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
<div class="form-group" style="text-align:center">
#Html.DropDownList("Group", new SelectList(ViewBag.articlesGroups, "GroupID", "GroupTitle.Name"), null, new { onchange = "document.location.href = '/Articles/ShowArticleGroup/' + this.options[this.selectedIndex].value;" })
</div>
</div>
}
First of all, usage of location.href on DropDownList seems wrong here:
#Html.DropDownList("Group", new SelectList(ViewBag.articlesGroups, "GroupID", "GroupTitle.Name"), null,
new { onchange = "document.location.href = '/Articles/ShowArticleGroup/' + this.options[this.selectedIndex].value;" })
AFAIK, location.href used for redirect to another page using HTTP GET, hence it will try to call first ShowArticleGroup action method without parameter, and the URL parameter simply ignored since given URL parameter only exist in POST.
To submit the form with DropDownList, you need to handle change event triggering POST into controller action method:
jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#Group").change(function() {
var groupId = $("#Group").val();
$.post('#Url.Action("ShowArticleGroup", "ControllerName")', { id: groupId }, function (response, status) {
// response handling (optional)
});
});
});
</script>
DropDownList
#Html.DropDownList("Group", new SelectList(ViewBag.articlesGroups, "GroupID", "GroupTitle.Name"), null)
I recommend you using strongly-typed DropDownListFor with binding to a viewmodel approach if you want to pass viewmodel contents during form submit.
NB: $.post is shorthand version of $.ajax which uses POST submit method as default.
Related issues:
Autopost back in mvc drop down list
MVC 4 postback on Dropdownlist change
Using MVC4, how would I process the return value of a JsonResult action in an Ajax form?
All of the examples I was able to locate deal primarily with an html result (ActionResult).
I know this question is poorly framed, missing code and such, but I plan on providing my experience as the answer. Hopefully between this question and the answer there will be some good content.
In an ASP.net controller (C#) you can return a json result as follows (hope you already know it).
[httppost]
public ActionResult MyAction(){
//this is the most amazing content
return Json(new
{
MyResult = "ok",
MyData = "This is some string data!"
});
}
Its not clear for me what you expect from the answer or I am not sure whether this is what you need as an answer, but hope it will be helpful.
If you are using jquery ajax, you can access the controller and get the json results it returns.
$.ajax({
type: "POST",
URL: "/MyController/MyAction",
dataType: "text"
})
.success(function(data){
var dataobj = $.parseJSON(data);
var result = dataobj.MyResult;
var msg = dataobj.MyData;
});
When you are using return new Json(); the server response is of ContentType application/json. But, to use Jquery's parseJSON function correctly, you need to pass the json to the function as a string, otherwise it do not parse it correctly. So, to get the json result as a string or 'text' you need to add dataType: "text" as an option to $.ajax{}. Then the server returns its response as plain text and you can parse json using jquery's parseJSON function. It will return a dynamically created object which includes data returned as json. So you can access those data using the names included in the json string.
Hope this will be helpful somewhat.
So most examples/tutorials on the web will instruct you to return a view via your HttpPost action method. When doing this you would set the 'UpdateTargetId' and InsertionMode properties on the AjaxOptions object.
But if you want to return data and work with it via javascript, the above method falls short.
Rather, you will need to set the OnSuccess method of the AjaxOptions object.
As you can see from the documentation, OnSuccess contains zero helpful information. To use it correctly you need to provide the name of a javascript function available on the current page. This will be used callback-style so make sure you use the appropriate syntax for your use case.
Here's a little demonstration:
Controller methods:
<HttpGet>
Function AjaxIndex() As ActionResult
Dim model As AjaxFormModel = New AjaxFormModel
' AjaxFormModel is a custom class. Architect it as you see fit.
Return View(model)
End Function
<HttpPost>
Function AjaxIndex(ByVal model As AjaxFormModel) As JsonResult
Dim result As AjaxFormResult = Nothing
' AjaxFormResult is a custom class. Fill it in with properties that make sense for you. I personally include .MessageType and .Payload properties.
' TODO: be sure you spin up a new object to pass to the `JsonResult`.
Return New JsonResult With {.Data = result, .JsonRequestBehavior = JsonRequestBehavior.AllowGet}
End Function
Html
Using Ajax.BeginForm("AjaxIndex", "Bootstrap",
routeValues:=Nothing,
ajaxOptions:=New AjaxOptions With {.HttpMethod = "POST",
.OnSuccess = "updateAjaxForm"},
htmlAttributes:=Nothing)
#<text>
<div class="row">
<div class="col-sm-12" id="UnknownError_message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" name="Name" />
<div id="Name_message"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-default" value="Save" />
</div>
</div>
</text>
End Using
javascript / jQuery
<script type="text/javascript">
function updateAjaxForm(data) {
//data is a fully reconstituted javascript object at this point. Thank you MVC!
var messageElement = $('#UnknownError_message');
switch (data.MessageType) {
case 0: // Error message
messageElement.html('Error: ' + data.Message);
break;
case 1: // Textual message
messageElement.html('Info: ' + data.Message);
break;
default:
messageElement.html('Unforseen Error.');
}
}
</script>