We Keep Coding

Ajax call to call a Controller give 404 error

I am using Ajax call to call a Controller method but I am getting this error:
http://localhost:55942/%22GetCalculateAmortizationSchedule%22,%20%22Home%22 404 (Not Found)
This is my Controller method:
[HttpPost]
public ActionResult GetCalculateAmortizationSchedule()
{
var data = ......
var httpClient = new HttpClient();
var response = httpClient.PostAsJsonAsync("http://localhost:62815/v1/APR/CalculateAmortizationSchedule", data).Result;
var returnValue = response.Content.ReadAsAsync<Dictionary<int, AmItem>>().Result;
return Content(returnValue.ToString());
}
This is the View code:
<form id="MyForm" method="post">
....
<input type="submit" id="test" value="test" />
</form>
and this is the Ajax code:
$('#MyForm').submit(function (e) {
$.ajax({
url: '#Url.Action("GetCalculateAmortizationSchedule", "Home")',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
contentType: false,
processData: false,
success: function (result) {
alert("success");
console.log(result.data);
// here in result you will get your data
},
error: function (result) {
}
});
e.preventDefault();
});
I think problem is this line that cannot find the url:
url: '#Url.Action("GetCalculateAmortizationSchedule", "Home")',

Use this instead of URl
url: "/home/GetCalculateAmortizationSchedule"
If you on same controller then do not need to add controller name
url: '#Url.Action("GetCalculateAmortizationSchedule")',

Pass model from 1 partial view to another partial view in the same view

I have 2 partial views being loaded in my main view.
The main view auto refreshes partial view 1 while partial view 2 should only be updated when a user clicks on an Ajax.ActionLink from partial view 1 which should pass the model into partial view 2 and then partial view 2 should be updated.
<div id="lcars">#Html.Partial("LCARS")</div>
<div id="monitorDetail">#Html.Partial("MonitorDetail")</div>
Update Not updating monitorDetail div
Main View
<div id="lcars">#Html.Partial("LCARS")</div>
<br/>
<div id="monitorDetail"></div>
Inside LCARS Partial
<script>
$('#TestButton').on("click", function (event)
{
event.preventDefault();
alert("clicked ajax");
$.ajax({
url: '#Url.Action("MonitorDetail", "NOCCommand", PAL.Intranet.MonitorType.AHSSQLCluster)',
contentType: 'application/json; charset=utf-8',
type: 'POST',
async: false,
dataType: 'html',
data: JSON.stringify(userModel)
})
.success(function (userResult) {
$('#monitorDetail').html(userResult);
})
.error(function (xhr, status) {
});
})
</script>
<div class="lcars-column u-1-3">
<div id="TestButton" class="lcars-button radius">SQL Cluster Online <span class="lcars-button-addition #(mod.SQLClusterOnline ? "online" : "offline")"> #(mod.SQLClusterOnline ? "Online" : "Offline")</span></div>
</div>
UPDATE 2
Here is the code currently. Removing the data throws an error that the value can't be null which is correct.
$.ajax({
type: 'POST',
url: '#Url.Action("MonitorDetail", "NOCCommand")',
contentType: 'application/json; charset=utf-8',
dataType: 'html',
data: {
mType: PAL.Intranet.MonitorType.AHSSQLCluster
},
success: function (data) {
alert("clicked 2"); //doesn't work
$('#monitorDetail').html(data);
},
error: function (xhr, status) {
alert("Error: " + xhr.responseText);
}
})
Update 3
I can now hit the controller but now the div does't show the partial view
Controller
public PartialViewResult AHSSQLClusterDetail()
{
PAL.Intranet.Models.MonitorDetailModel mDetail = new Models.MonitorDetailModel();
mDetail.Item = "test";
mDetail.Val = "test 2";
List<PAL.Intranet.Models.MonitorDetailModel> d = new List<Models.MonitorDetailModel>();
d.Add(mDetail);
return PartialView("MonitorDetail", d);
}
In LCARS Partial View
<script>
$('#TestButton').on("click", function () {
$.ajax({
type: 'GET',
url: '#Url.Action("AHSSQLClusterDetail", "NOCCommand")',
dataType: 'html',
async: false,
cache: false,
success: function (data) {
$("#monitorDetail").html(data);
alert("div loaded");
},
error: function (xhr, status) {
alert("Error: " + xhr.responseText);
}
})
})
</script>
<div id="TestButton" class="lcars-button radius">SQL Cluster Online <span class="lcars-button-addition #(mod.SQLClusterOnline ? "online" : "offline")"> #(mod.SQLClusterOnline ? "Online" : "Offline")</span></div>
Main View
<div id="lcars">#Html.Partial("LCARS")</div>
<br/>
<div id="monitorDetail"></div>

If I understood your problem correctly, I would have done following:
In Main view, I would just load the div1 (partial view 1).
<div id="userSummaryContent" class="tabinsidebox">
#Html.Partial("_OrganizationUserSummary", Model.SummaryViewModel)
</div>
<div id="monitorDetail"></div>
Second div would not load anything initially.
Then I would define a click handler for the link (using its id). In this function I will load the content of second div using AJAX and then just update the second div like:
$(#monitorDetail).html(result);
The handler code would look like this:
$.ajax({
url: '#Url.Action("MonitorDetail", "Test")',
contentType: 'application/json; charset=utf-8',
type: 'POST',
async: false,
dataType: 'html',
data: JSON.stringify(userModel)
})
.success(function (userResult) {
$('#monitorDetail').html(userResult);
})
.error(function (xhr, status) {
});

Getting parameters for a Json controller method

I'm trying to get and pass my ViewModel to my Json method doing the stuff like this :
In my view :
<input type="button" id="suggestionBtn" title="Suggestion" onclick ="location.href='#Url.Action("GetNextAppointment", "Home", new { svm = Model })'" />
In my Controller :
public JsonResult GetNextAppointment(SuggestionViewModel svm)
{
return Json(svm, JsonRequestBehavior.AllowGet);
//this is just for testing
}
While debugging, I found out that my svm is null. I tried to replace it by a string parameter and hard coding the value in my view and this works. So, I don't know very much where is the problem.
Any idea guys?
EDIT : Code edited to use jQuery AJAX
My view's now like this :
#model AstellasSchedulerV2.Models.SuggestionViewModel
<div class="rightPanel">
#using (Html.BeginForm("NewAppointment", "Home", FormMethod.Post, new { #id = "form_ValidateAppointment" }))
{
#Html.Hidden("stringParam","")
<fieldset>
<div>
Patch Anti-douleur Corps #Html.CheckBoxFor(s => s.PADC, new { #class = "checkbox", #id = "chbxPADC" })
</div>
<br />
<div>
Patch Anti-douleur Pied #Html.CheckBoxFor(s => s.PADP, new { #class = "checkbox", #id = "chbxPADP" })
</div>
<br />
Click me
</fieldset>
}
</div>
<script type ="text/javascript">
$(document).ready(function () {
$("#ClickMe").click(function () {
var o = new Object();
o.PADC = $("#chbxPADC").val();
o.PADP = $("#chbxPADP").val();
jQuery.ajax({
type: "POST",
url: "#Url.Action("GetJson")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(o),
success: function (data) { alert(data.PADC); },
failure: function (errMsg) { alert(errMsg); }
});
});
</script>

Here goes the solution, Lets say you have your viewmodel this way -
public class SuggestionViewModel
{
public bool PADC { get; set; }
public bool PADP { get; set; }
}
Then you have a View in the following way. Here I used JQuery to make a POST request to GetJson Controller Action. I constructed a JavaScript Object and then serialized it to Json. Then finally passed the Json string to Controller Action.
<fieldset>
<div>
Patch Anti-douleur Corps #Html.CheckBoxFor(s => s.PADC, new { #class = "checkbox", #id = "chbxPADC" })
</div>
<br />
<div>
Patch Anti-douleur Pied #Html.CheckBoxFor(s => s.PADP, new { #class = "checkbox", #id = "chbxPADP" })
</div>
<br />
</fieldset>
This is the JQuery part -
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("#ClickMe").click(function () {
var chk = $('#chbxPADC').is(':checked');
var chk1 = $('#chbxPADP').is(':checked');
var o = new Object();
o.PADP = chk1;
o.PADC = chk;
jQuery.ajax({
type: "POST",
url: "#Url.Action("GetJson")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(o),
success: function (data) { alert(data.PADP); },
failure: function (errMsg) { alert(errMsg); }
});
});
});
</script>
Click me
And when you click the button, it will hit following controller -
public JsonResult GetJson(SuggestionViewModel svm)
{
return Json(svm, JsonRequestBehavior.AllowGet);
}
And when you inspect the parameter using breakpoint, you will have parameters passed -
And as the response, you will have following output -

You can't post complex objects as parameter.
If you want to get json result, you should call an ajax request.
You should post your model in an ajax request. (you can use jquery .ajax metod), because you cant get values from controller action metod if you use location.href

How to send files to webmethod along with other data? Without using any plug in

Ok so I have a couple of input fields etc I send the data of these field to server side webmethod . WHich is working fine. But I also want to send files to the same webmethod (and not ashx hander) alond with the data of other input fields. Can you please help me out?
This calls webmethod which stored data in database
function SendToServer(name,lineitems) {
$.ajax({
type: "POST",
url: "test.aspx/PostDataWM",
data: JSON.stringify({ name: name,lineitems: lineitems }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data, status) {
// console.log("CallWM");
alert(data.d);
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
}
});
}
File Upload MarkUp
<span style="font-family: Arial">Click to add files</span>
<input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
<br />
<br />
<div id="FileUploadContainer">
<!--FileUpload Controls will be added here -->
</div>
<script type="text/javascript">
var counter = 0;
function AddFileUpload() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter + '" type="file" class="clsFileUpload" /><input id="Button' + counter + '" type="button" value="Remove" onclick = "RemoveFileUpload(this)" />';
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div) {
document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}
</script>
WebMethod
[WebMethod(enableSession: true)]
public static string PostDataWM(string name,string lineitems)
{
//blah blah
}

No need to stringify the data.
Try it directly. You can get data at your code level
type: "POST",
url: "test.aspx/PostDataWM",
data: { name: name,lineitems: lineitems },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,

Pass ID in Html.ActionLink via ajax to get partial view

I have an MVC View page, strongly-typed to an enumerated product list. Each list item has an Html.ActionLink with a unique id. In my jquery file, I have an $.ajax function which should process the link with the corresponding id . The intent is to load a partial view on the same page, with that item's information, to allow editing for whatever item has been clicked. I don't want the actionr to result in a separate page, or generate a post to the server.
// here is the MVC stuff
#model IEnumerable<SimpleAjax.Models.Product>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { id = "btnShowEdit" + item.Id, #class= ".button_action"})
|
</td>
</tr>
}
<div id="showEditProd">
</div>
//inside controller
public ActionResult ShowEdit(int id)
{
Product prod = db.Product.Find(id);
ProductViewModel viewModel = new ProductViewModel
{
EditProduct = prod
};
return PartialView(viewModel);
}
//inside a separate partial view page
#model SimpleAjax.Models.ProductViewModel
#using (Html.BeginForm("Index_AddItem", "Home", FormMethod.Post, new { id = "fid" }))
{
<div>
#Html.LabelFor(model => model.EditProduct.Name)
#Html.EditorFor(model => model.EditProduct.Name)
</div>
<div>
#Html.LabelFor(model => model.EditProduct.Price)
#Html.EditorFor(model => model.EditProduct.Price)
</div>
<div>
<input type="submit" value="Submit" />
</div>
}
now below works as expected, when I have hardcoded IDs:
$('#btnShowEdit1,#btnShowEdit2,#btnShowEdit3').click(function () {
$.ajax({
url: this.href,
contentType: 'application/html; charset=utf-8',
type: 'GET',
success: function (result) {
$('#showEditProd').html(result);
}
});
return false;
});
The above jquery works as desired. The partial view gets loaded on the same page as enumerated list. But obviously I don't want to hardcode variables. I may have x number of #btnShowEdit. I want to utilize a class, correct? So I have ".button_action" class that will enumerate the Id. But when I do that, as below, the link navigates to a separate page.
these go to a separate page, not what I want
$('.button_action').click(function (index) {
$.ajax({
url: this.href,
contentType: 'application/html; charset=utf-8',
type: 'GET',
success: function (result) {
$('#showEditProd').html(result);
}
});
return false;
});
});
//also tried this...
$('.button_action').each(function (index) {
$('#btnShowEdit' + index).click(function () {
$.ajax({
url: this.href,
contentType: 'application/html; charset=utf-8',
type: 'GET',
success: function (result) {
$('#showEditProd').html(result);
}
});
return false;
});
});
I know there's gotta be a simple solution.Thanks for your help in advance.

Any specific reason for not using the Ajax HTML-helper?
http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx
You can use it as an actionlink, but it is done async and the result can be placed in your showEditProd.
#Ajax.ActionLink("Action",
"Controller",
_YOURID_,
new AjaxOptions { HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "showEditProd",
OnComplete = "your_js_function();" })

In case anyone else needs the solution to the above... It was too simple to believe.The jquery ajax code does not need an id htmlattribute from the Html.ActionLink. In fact, this extra attribute is what was causing the trouble. The jquery ajax recognizes the id from the "this.href' as that is the route controller along with the id parameter. Therefore I removed the id from htmlattributes in the actionlink. Now it's working as expected.
#Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { #class= ".button_action"})
in js file
$('.button_action').click(function (index) {
$.ajax({
url: this.href,
contentType: 'application/html; charset=utf-8',
type: 'GET',
success: function (result) {
$('#showEditProd').html(result);
}
});
return false;
});
});

Check this:
$('.button_action').click(function (e) {
e.preventDefault() // this prevent default behavior for hyperlink on 'click' event