Hi I'm trying to refresh a mvccontrib grid, using ajax in MVC but it doesn't work. When I use "return PartialView("myview", mylist);" nothing happend. The response never came to the jquery code. I put the keyword debbuger to see if it works but never got there.
this is my JQuery Code to refresh the grid:
function refreshTable() {
$.ajaxSetup({
async: false,
cache: false
});
$.get('<%= Url.Action("RefreshGridData", "Countries") %>',
function (response) {
debugger;
$(".table-list").replaceWith(response)
});
}
And this is my Action:
public ActionResult RefreshGridData()
{
GetAllCountries();//this puts a list in the ViewData
return PartialView("CountriesPage", (List<iCatalogData.Country>)ViewData["CountriesList"]);
}
And this is my grid:
<div id="container">
<% Html.Grid((List<iCatalogData.Country>)ViewData["CountriesList"])
.Columns(column =>
{
column.For(co => Html.ActionLink(co.IdCountry.ToString(), "EditCountry", "Countries", new { id = co.IdCountry }, null)).Named("Id Country");
column.For(co => co.CountryName);
column.For(co => Html.ActionLink("Delete", "DeleteCountry", "Countries", new { id = co.IdCountry }, null)).Named("Delete");
}).Attributes(id => "example", #class => "table-list", style => "width: 100%;").Empty("No countries available").Render();
%>
</div>
Thanks.
I had a similar problem and solved it by changing the return type of the action to PartialViewResult instead of ActionResult. Could possibly be the same issue for you.
Related
I have a problem that I was stacked on for a while. I am rather new to this stuff so please be patient. I think it is like very simple to solve but I am running circles now. My intention is to make a simple alert that informs that method was completed. As you can see below my first attempt was made with simple string and if statement. I dont want to reload the page any more but now I have a problem that method ends later than alert script starts.
So I have a controller:
[HttpPost]
public ActionResult Executor(LMCMainViewModel model)
{
var curlsExecutor = _curls;
var applicationPurgeCurl = curlsExecutor.GetApplicationCurl(model);
var temporary = model.SuccessExecutionStatus = curlsExecutor.CurlCaller(model.ApplicationList.ApplicationCurl);
var tempListOfApplications = PopulateModel(model);
model.ApplicationList.ListOfApplications = tempListOfApplications.ApplicationList.ListOfApplications;
model.SuccessExecutionStatus = temporary;
return View("ListOfApplications", model);
}
And I have my view:
#model LMC.Models.LMCMainViewModel
#{
ViewData["Title"] = "Liberation";
}
#using (Html.BeginForm("HeaderString", "LMC"))
{
}
#using (Html.BeginForm("Executor", "LMC", FormMethod.Post))
{
<div class="col-sm-2" asp-action="ListOfApplications">
#Html.DropDownListFor(x => x.ApplicationList.ChosenApplication, Model.ApplicationList.ApplicationListItem, new { #id = "DropdownID" })
</div>
<div class="col-sm-2 col-sm-push-5">
#Html.HiddenFor(x => x.ApplicationList.ApplicationListItem)
<input class="btn ctn-success" id="submit" type="submit" value="Submit" />
<button id="submitButtonAjax" type="button" class="btn btn-success">Ajax button</button>
<div class="col-sm-12">
#Html.Label(null, (Model.SuccessExecutionStatus ? "Success" : " "),
new { Style = Model.SuccessExecutionStatus ? "color: green;" : "color: red;" })
</div>
</div>
}
Than I tried to implement many variations of Ajax script but I got so twisted that I can't even post you the best one... One thing I know is that when I remove: #using (Html.BeginForm("Executor", "LMC", FormMethod.Post)) and try to place it into Ajax it simply doesn't work. My intention is to have something that would work like this:
<script type="text/javascript">
$("#submitButtonAjax").on("click", function () {
$.ajax({
type: 'POST',
url: "/LMC/Executor",
success: function () {
alert("Went well");
}
});
</script>
I tried to convert controller method return into Json but it didnt work as well. I would appreciate any advices, where I can read about anything similar(I am aware that there are probably many similar topics, but I wan't able to implement anything that was working into my code, because I find my question one step backwards in comparison to others), or maybe it is that easy and I am missing something and you can just post a solution. Anyway, many thanks for any help.
The ajax call should look like bellow
$( document ).ready(function() {
$("#submitButtonAjax").on("click", function () {
var postData = {
FirstPropertyOfTheModel: ValueForTheFirstProperty,
SecondPropertyOfTheModel: ValueForTheSecondProperty,
};
$.ajax({
type: 'POST',
url: "/LMC/Executor",
data:postData,
success: function () {
alert("Went well");
},
error: function () {
alert("Opssss not working");
}
});
});
});
data is the value for the model of ActionResult method of the controller. The FirstPropertyOfTheModel and SecondPropertyOfTheModel will be replaced by the name of property and assign the corresponding value respectably. At url you can use
'#Url.Action("Executor", "LMC")'
so the ajax will look like
$( document ).ready(function() {
$("#submitButtonAjax").on("click", function () {
var postData = {
FirstPropertyOfTheModel: ValueForTheFirstProperty,
SecondPropertyOfTheModel: ValueForTheSecondProperty,
};
$.ajax({
type: 'POST',
url: '#Url.Action("Executor", "LMC")',
data:postData,
success: function () {
alert("Went well");
},
error: function () {
alert("Opssss not working");
}
});
});
});
I have the following scenario, I have a for that I'm submitting using ajax using the following code:
$("#cmdAjaxSave").click(function (evt) {
evt.preventDefault();
var $form = $('#frmItem');
if ($form.valid()) {
ajaxSave();
}
});
function ajaxSave() {
if (!onBeforeSubmit()) return; //item is not valid, so the ajax call should not be executed
//var token = $('[name=__RequestVerificationToken]').val();
popup('ajaxSplash');
$.ajax({
type: "POST",
url: '#Url.Action("Index")',
data: $("#frmItem").serialize(),
success: function (html) {
//console.log(html);
$("#formDiv").empty();
$("#formDiv").append(html);
initItemPage();
alert("Item was saved successfully");
},
error: function () { popup('ajaxSplash'); onFailure(); }
});
}
The problem I'm seeing here is that even though "frmItem" is returning "true" when I arrive clientside the ModelState is not valid. Specifically for three properties, which actually has the correct value.
Digging into the code made by the developer who originally coded this I found that for instance this property:
#Html.TextBoxFor(model => model.Item.Service.CPC_BW, htmlAttributes: new { #class = "Text", #onkeyup = "validItem();", #id = "SrvCPCBlk" })
Is actually defined like this:
private double _CPC_BW;
[Required]
[Range(0, 100000, ErrorMessage = "CPC value required")]
public string CPC_BW { get { return String.Format("{0:F}", _CPC_BW); } set { _CPC_BW = Convert.ToDouble(value); } }
I think he did it because TextBoxFor does not offers an obvious way to format a number and even though it looks fishy I don't know how could this be causing the error.
The Html of the form is rendered like this
<div id="itemPopUpForm">
#{Html.EnableClientValidation();}
<div id="formDiv">
#{ Html.RenderPartial("ItemData", Model, new ViewDataDictionary() { { "Machines", ViewBag.Machines }, { "WarehouseList", ViewBag.WarehouseList }, { WebConstants.FORM_ID_KEY, #ViewData[WebConstants.FORM_ID_KEY] } }); }
</div>
</div>
The partial view contains the form that is submited in the ajax request.
I think you should try and clear the model state then test whether its valid...
Its a common issue.
ModelState.Clear();
ModelState.IsValid();
I have a certain ajax form and when submitted I want to include another form outside of that ajax form. Let me show you an example:
#using (Ajax.BeginForm("PayWithBankTransfer", "Payment", new { salesLineId = salesLine.SalesLineID }, new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "bankForm",
LoadingElementId = "spinnerBank"
}, new { id = "feedback-form" }))
{
//some stuff
<button type="submit">Reserve</button>
}
I have another tag outside of the form I want to include in the ajax form submission
<div id="theOtherStuff">
//otherStuff
</div>
How could I submit the other stuff along with the ajax form?
I don't think that MS unobtrusive AJAX supports this. So let's get rid of it and use plain jQuery. The .serialize() method is what you are looking for.
So we start by replacing the Ajax.BeginForm form with a regular Html.BeginForm
#using (Html.BeginForm(
"PayWithBankTransfer",
"Payment",
new { salesLineId = salesLine.SalesLineID },
FormMethod.Post,
new { id = "feedback-form" })
)
{
//some stuff
<button type="submit" class="t-button t-state-default" style="width: 100px; height: 50px;">Reserver</button>
}
then we provide an id to the other form so that we can reference it in our script:
<div id="theOtherStuff">
#using (Html.BeginForm(null, null, FormMethod.Post, new { id = "theOtherStuffForm" }))
{
//otherStuff
}
</div>
and all that's left is write our script in a separate javascript file to unobtrusively AJAXify this form:
$(function() {
$('#feedback-form').submit(function () {
$('#spinnerBank').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).add('#theOtherStuffForm').serialize(),
success: function (result) {
$('#bankForm').html(result);
},
complete: function () {
$('#spinnerBank').hide();
}
});
return false;
});
});
The following line should be of particular interest:
data: $(this).add('#theOtherStuffForm').serialize(),
As you can see the .serialize method allows convert multiple forms into suitable serialized form.
It is more than obvious that you should not have conflicting names with the input elements of the 2 forms (for example have 2 elements with the same name), otherwise the default model binder could go berserk. It's up to you to resolve those conflicts if there are any.
I am having a hard time figuring out how to get cascading drop down lists to work for my asp.net mvc3 application. I have a popup box and I would like to display 2 dropdownlists, the 2nd being populated based on what is selected in the first. Each time I run the application the controller method returns the correct list of values, but instead of hitting the success part of the ajax call I hit the error part. I have done lots of research and followed several examples I have found but something is still not quite right, any help would be greatly appreciated.
Edit:
Further inspection using firebug shows an error 500 internal server error which states: Exception Details: System.InvalidOperationException: A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.GameEdition
I have the following jQuery / AJAX:
<script type="text/javascript">
$(function () {
$("#PlatformDropDownList").change(function () {
var gameId = '#Model.GameID';
var platformId = $(this).val();
// and send it as AJAX request to the newly created action
$.ajax({
url: '#Url.Action("Editions")',
type: 'GET',
data: { gameId: gameId, platformId: platformId },
cache: 'false',
success: function (result) {
$('#EditionDropDownList').empty();
// when the AJAX succeeds refresh the ddl container with
// the partial HTML returned by the PopulatePurchaseGameLists controller action
$.each(result, function (result) {
$('#EditionDropDownList').append(
$('<option/>')
.attr('value', this.EditionID)
.text(this.EditionName)
);
});
},
error: function (result) {
alert('An Error has occurred');
}
});
});
});
Here is my controller method:
public JsonResult Editions(Guid platformId, Guid gameId)
{
//IEnumerable<GameEdition> editions = GameQuery.GetGameEditionsByGameAndGamePlatform(gameId, platformId);
var editions = ugdb.Games.Find(gameId).GameEditions.Where(e => e.PlatformID == platformId).ToArray<GameEdition>();
return Json(editions, JsonRequestBehavior.AllowGet);
}
Here is my web form html:
<div id="PurchaseGame">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true, "Please correct the errors and try again.")
<div>
<fieldset>
<legend></legend>
<p>Select the platform you would like to purchase the game for and the version of the game you would like to purchase.</p>
<div class="editor-label">
#Html.LabelFor(model => model.PlatformID, "Game Platform")
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.PlatformID, new SelectList(Model.Platforms, "GamePlatformID", "GamePlatformName"), new { id = "PlatformDropDownList", name="PlatformDropDownList" })
</div>
<div class="editor-label">
#Html.LabelFor(model => model.EditionID, "Game Edition")
</div>
<div id="EditionDropDownListContainer">
#Html.DropDownListFor(model => model.EditionID, new SelectList(Model.Editions, "EditionID", "EditionName"), new { id = "EditionDropDownList", name = "EditionDropDownList" })
</div>
#Html.HiddenFor(model => model.GameID)
#Html.HiddenFor(model => model.Platforms)
<p>
<input type="submit" name="submitButton" value="Purchase Game" />
<input type="submit" name="submitButton" value="Cancel" />
</p>
</fieldset>
</div>
}
You cannot send JSON encoded requests using the GET verb. So replace type: 'GET' with type: 'POST' and it will work. Also since you have specified a JSON request you must, well, send a JSON request which is achieved with the JSON.stringify function: data: JSON.stringify({ gameId: gameId, platformId: platformId }),. But since you only have 2 values I think that using GET would be easier. So my recommendation is to remove the contentType: 'application/json' parameter and have your AJAX request look like this:
$.ajax({
url: '#Url.Action("Editions")',
type: 'GET',
data: { gameId: gameId, platformId: platformId },
cache: 'false',
success: function (result) {
$('#EditionDropDownList').empty();
// when the AJAX succeeds refresh the ddl container with
// the partial HTML returned by the PopulatePurchaseGameLists controller action
if(result.length > 0)
{
$.each(result, function (result) {
$('#EditionDropDownList').append(
$('<option/>')
.attr('value', this.EditionID)
.text(this.EditionName)
);
});
}
else
{
$('#EditionDropDownList').append(
$('<option/>')
.attr('value', "")
.text("No edition found for this game")
);
}
},
error: function () {
alert('An Error has occured');
}
});
Also in the DropDownListFor helper in your Razor markup I notice the following:
onchange = "Model.PlatformID = this.value;"
All I can say is that this doesn't do what you might think it does.
UPDATE:
It seems that you are getting a circular object reference error because you are passing your editions domain model to the Json method. Circular reference object hierarchies cannot be JSON serialized. Besides you don't need to waste the bandwidth by sending all the crap contained in this editions to the client. All your client needs is a collection of ids and names. So simply use view models:
public ActionResult Editions(Guid platformId, Guid gameId)
{
var editions = ugdb
.Games
.Find(gameId)
.GameEditions
.Where(e => e.PlatformID == platformId)
.ToArray<GameEdition>()
.Select(x => new
{
EditionID = x.EditionID,
EditionName = x.EditionName
})
.ToArray();
return Json(editions, JsonRequestBehavior.AllowGet);
}
How can I send data from a dialog to the controller? Model Binding?
Can I have example please?
I'm making some assumptions here based on your previous questions that you are interested in ASP.NET MVC and are using jQuery UI dialogs. Further I'm guessing that you want the data submitted without reloading the page -- i.e., the dialog should be dismissed and return you back to the original page.
The simplest way is to create a form in the dialog and have that form submited via AJAX. I would suggest that you have the dialog populated via a controller action that loads a partial view. This will make it simpler to generate the mark up for the dialog. Give the content area of the dialog a class that makes it easy to find once the dialog is created, then in the dialog open handler replace the HTML inside the content area via a load to the controller action. Use the buttons on the dialog to submit the form.
$(function() {
$('.someSelector').click( function() {
$('<div title="Update Contacts"><p class="dialog-content"></p></div>').dialog({
autoOpen: true,
modal: true,
open: function() {
$(this).find('.dialog-content')
.load( '<%= Url.Action( "show", "contact", new { id = Model.UserID } ) %>',
function() {
$(this).find('form').submit( function() {
return false;
}
}
);
}
buttons: function() {
'Update': function() {
var $this = $(this);
var form = $this.find('form');
$.post( form.attr('action'), form.serialize(), function(){
$this.dialog('destroy');
});
},
'Cancel': function() {
$(this).dialog('destroy');
}
}
});
});
});
Partial view
<% using (Html.BeginForm( "update", "contact", null, FormMethod.Post, new { id = "contact-form" } )) { %>
<%= Html.EditorForModel() %>
<% } %>