How do I initiate an ajax request (calling controller action) from razor view which returns the data in JSON format?
At the moment after clicking the action link in my razor view the page does the post request which redirects the page to /actionName which of course does not exist.
I am also using jQuery but not sure how do I fetch the data from razor view which needs to be passed if I use jQuery ajax method.
ShowEventLogs.cshtml
#{ ViewBag.Title = "Event Logs"; }
#model IEnumerable
<Application.Models.EventLogs>
<table id="data-table" class="table display responsive" style="width:100%">
<thead class="thead-colored thead-light">
<tr>
<th>Time</th>
<th>Scheme</th>
<th>Serial Number</th>
<th>Batch</th>
<th>Exp Date</th>
<th>Product Code</th>
<th>Http Code</th>
<th>Is Confirmed?</th>
<th>Confirmation Date</th>
<th>Verify Pack</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Timestamp</td>
<td>#item.ProductCodeScheme</td>
<td>#item.SerialNumber</td>
<td>#item.Batch</td>
<td>#item.ExpirationDate</td>
<td>#item.ProductCode</td>
<td>#item.HttpResponseCode</td>
<td>#item.ConfirmedParsed</td>
<td>#item.ConfirmedDate</td>
if (#item.HttpResponseCode == "202")
{
<td class="text-secondary">#Html.ActionLink("Verify Pack", "VerifyPack", "Home", new { ProductCodeScheme = #item.ProductCodeScheme, ProductCode = #item.ProductCode, SerialNumber = #item.SerialNumber, Batch = #item.Batch, ExpirationDate = #item.ExpirationDate, CommandStatusCode = 0 }, new { #class = "text-info" })</td>
}
else
{
<td class="text-secondary">Not Available</td>
}
</tr>
}
</tbody>
</table>
}
Controller action
[HttpPost]
public ActionResult VerifyPack(string productCodeScheme, string productCode, string serialNumber, string batch, string expirationDate, int commandStatusCode, string orderTrackingNo = null) {
string TextAreaResult = string.Empty;
string TextAreaResultException = string.Empty;
string TextAreaResultHttpOperationCode = string.Empty;
string TextAreaResultHttpResponseCode = string.Empty;
string TextAreaResultHttpInformation = string.Empty;
string TextAreaResultHttpWarning = string.Empty;
string TextAreaResultState = string.Empty;
string RemoteIpAddress = string.Format("{0}", Request.UserHostAddress);
try {
using(SecureMediDatabase database = new SecureMediDatabase(this)) {
DatabaseFactory.setDatabase(database);
Request baseRequest = (Request) database.createRequest(Country);
ServiceThread serviceThread = new ServiceThread(0, null, Country);
serviceThread.attach(this);
baseRequest.setId(0);
baseRequest.setProductCodeScheme(productCodeScheme);
baseRequest.setRequestType(1); //single pack
baseRequest.setProductCode(productCode);
baseRequest.setSerialNumber(serialNumber);
baseRequest.setBatch(batch);
baseRequest.setExpirationDate(expirationDate);
baseRequest.setWorkstation(RemoteIpAddress);
baseRequest.setManualEntry(string.IsNullOrEmpty(expirationDate) || string.IsNullOrEmpty(batch));
if (baseRequest.isManualEntry()) {
switch (commandStatusCode) {
case 2:
case 3:
break;
default:
throw new NotSupportedException("This operation does not support manual entries!");
}
}
switch (Country) {
case "SE":
SecureMediRequestSE requestSE = (SecureMediRequestSE) baseRequest;
requestSE.setUserId(#User.Identity.Name);
requestSE.setCommandStatusCode(commandStatusCode);
requestSE.OrderTrackingNumber = orderTrackingNo;
break;
case "FI":
SecureMediRequestFI requestFI = (SecureMediRequestFI) baseRequest;
requestFI.setSubUserId(#User.Identity.Name);
break;
}
serviceThread.RunRequest(control, baseRequest, apteekki);
TextAreaResult = string.Format("{0} {1} {2} {3} {4}", baseRequest.getResponseOperationCode(), baseRequest.getHttpResponseCode(), baseRequest.getHttpInformation(), baseRequest.getHttpWarning(), baseRequest.getResponseStatusCode());
TextAreaResultHttpOperationCode = string.Format("{0}", baseRequest.getResponseOperationCode());
TextAreaResultHttpResponseCode = string.Format("{0}", baseRequest.getHttpResponseCode());
TextAreaResultHttpInformation = string.Format("{0}", baseRequest.getHttpInformation());
TextAreaResultHttpWarning = string.Format("{0}", baseRequest.getHttpWarning());
TextAreaResultState = string.Format("{0}", baseRequest.getResponseStatusCode());
}
} catch (Exception exc) {
TextAreaResultException = "Exception: " + exc.Message;
}
return Json(new {
result = TextAreaResult,
httpOperationCode = TextAreaResultHttpOperationCode,
httpResponseCode = TextAreaResultHttpResponseCode,
httpInformation = TextAreaResultHttpInformation,
httpWarning = TextAreaResultHttpWarning,
state = TextAreaResultState,
exception = TextAreaResultException,
isSuccess = TextAreaResultHttpResponseCode == "200" || TextAreaResultHttpResponseCode == "202"
});
}
Error based on the answer:
Basically #Html.ActionLink() helper renders anchor tag (<a>) with attributes and defaulted to use GET request by refreshing whole page, hence you need to add preventDefault() in order to use AJAX callback from that element. If the action method uses HTTP GET method, you can perform simple AJAX call against common class of the anchor link like this:
$('.text-info').on('click', function (e) {
e.preventDefault();
var url = $(this).attr('href');
$.get(url, function (response) {
// do something with AJAX response
});
});
However since target controller action marked as [HttpPost], you need to extract query string parameters from href attribute with additional function and use them in the AJAX call with type: 'POST' setting, or use $.post():
$('.text-info').on('click', function (e) {
e.preventDefault(); // mandatory to prevent GET request
var url = $(this).attr('href');
var pcs = getQueryStringParams(url, 'ProductCodeScheme');
var pc = getQueryStringParams(url, 'ProductCode');
var sn = getQueryStringParams(url, 'SerialNumber');
var batch = getQueryStringParams(url, 'Batch');
var expDate = getQueryStringParams(url, 'ExpirationDate');
var csc = getQueryStringParams(url, 'CommandStatusCode');
// create key-value pair for action method parameters
var obj = { ProductCodeScheme: pcs, ProductCode: pc, SerialNumber: sn, ... }
$.ajax({
type: 'POST',
url: url.split('?')[0], // URL without query string, or use '#Url.Action("VerifyPack", "Home")'
data: obj,
dataType: 'json', // expects response as JSON
success: function (response) {
// do something with AJAX response
},
error: function (xhr, status, err) {
// error handling
}
});
// just make sure that the link is not redirecting
return false;
});
function getQueryStringParams(url, name) {
return (RegExp(name + '=' + '(.+?)(&|$)').exec(url)||[,null])[1];
}
Actually there exists another way to call AJAX from anchor tag like #Ajax.ActionLink(), depending on your choice:
#Ajax.ActionLink("Verify Pack", "VerifyPack", "Home", new { ProductCodeScheme = #item.ProductCodeScheme, ProductCode = #item.ProductCode, SerialNumber = #item.SerialNumber, Batch = #item.Batch, ExpirationDate = #item.ExpirationDate, CommandStatusCode = 0 },
new AjaxOptions { HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "targetElementId",
OnComplete = "onComplete();"
},
new { #class = "text-info" })
Note:
If you need to handle AJAX request and normal request from the same controller, you can differentiate them using Request.IsAjaxRequest() (or Context.Request.Headers["X-Requested-With"] == "XMLHttpRequest" in Core MVC).
Something like this should get you started. Add a class to the items you need to pull information from. Then instead of using an actionlink just create a normal a element with a unique class as well. Have JQuery handle click events on those links and pass the other TD items of the same row to the controller via an AJAX call.
$(".button").click( function() {
var tr = $(this).closest("tr");
var ProductCodeScheme = tr.find(".ProductCodeScheme").html();
var SerialNumber = tr.find(".SerialNumber").html();
var Batch = tr.find(".Batch").html();
var ExpirationDate = tr.find(".ExpirationDate").html();
var ProductCode = tr.find(".ProductCode").html();
$.ajax({
url: "/Verify Pack/VerifyPack",
type: "POST",
data: ({
ProductCodeScheme: ProductCodeScheme,
SerialNumber: SerialNumber,
Batch: Batch,
ExpirationDate: ExpirationDate,
ProductCode: ProductCode
}),
cache: false,
success: function(data){
//Do something here for a successful POST
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data-table" class="table display responsive" style="width:100%">
<thead class="thead-colored thead-light">
<tr>
<th>Time</th>
<th>Scheme</th>
<th>Serial Number</th>
<th>Batch</th>
<th>Exp Date</th>
<th>Product Code</th>
<th>Http Code</th>
<th>Is Confirmed?</th>
<th>Confirmation Date</th>
<th>Verify Pack</th>
</tr>
</thead>
<tbody>
<tr>
<td>Timestamp 1</td>
<td class="ProductCodeScheme">ProductCodeScheme 1</td>
<td class="SerialNumber">SerialNumber 1</td>
<td class="Batch">Batch 1</td>
<td class="ExpirationDate">ExpirationDate 1</td>
<td class="ProductCode">ProductCode 1</td>
<td>HttpResponseCode 1</td>
<td>ConfirmedParsed 1</td>
<td>ConfirmedDate 1</td>
<td class="text-secondary">Item 1</td>
</tr>
<tr>
<td>Timestamp 2</td>
<td class="ProductCodeScheme">ProductCodeScheme 2</td>
<td class="SerialNumber">SerialNumber 2</td>
<td class="Batch">Batch 2</td>
<td class="ExpirationDate">ExpirationDate2</td>
<td class="ProductCode">ProductCode 2</td>
<td>HttpResponseCode 2</td>
<td>ConfirmedParsed 2</td>
<td>ConfirmedDate 2</td>
<td class="text-secondary">Item 2</td>
</tr>
</tbody>
</table>
Related
I've developed an asp.net MVC web app where I have a table that shows some items in a model.
I can filter it now with a dropdown list using ajax
The model that i pass to the table is correct (if i go to the model before the foreach there are 3 rows instead of 10 thanks to the filter)
The problem is that the table doesn't change, it always shows all the rows as the initial request.
It look like it works but the table won't update...
There's my jquery ajax call:
$("#Dropdown1Id").on('change', function () {
//console.log("onchange");
//console.log($("#Dropdown1Id").val());
var drpdown1 = $("#Dropdown1Id").val();
var submit = $("#submitButton");
$.ajax({ // crea una chiamata AJAX
data: { data: drpdown1 }, // prendi i dati del form in questo caso del primo dropdown
type: "GET", // GET o POST
url: "/Select/Filter", // li passa al controller
success: function () { // se va con successo esegue il codice seguente
submit.click();
$("#frmId").submit();
},
error: function (error) {
console.log("error")
}
});
});
There's my controller action:
public ActionResult Filter(string data)
{
List<Card> cards = new List<Card>();
ViewBag.stato = new SelectList(myApi.GetState(), "Name", "Name");
if (data != null && data != "")
{
foreach (var card in model)
{
if (card.IdList == data || data == "")
cards.Add(card);
}
return View(cards);
}
return View(model);
}
There's my view with the daple and the dropdown:
#using (Html.BeginForm(new { id = "frmId"}))
{
#Html.AntiForgeryToken()
<table id="tb2">
<tr>
<th>
<h4> LIST : #Html.DropDownList("stato", null, new { #id = "Dropdown1Id" })</h4>
</th>
#*<th>
<h4>ARCHVIED : #Html.DropDownList("closed", null, new { #id = "Dropdown2Id" })</h4>
</th>*#
<th>
<input type="submit" value="Filter" class="btn btn-info" id="submitButton" />
</th>
</tr>
</table>
<br />
<div id="risultato"></div>
<table class="table" id="tb1">
<tr>
<th style="text-align:center">
TRELLO'S CARDS LIST
</th>
<th>LIST</th>
<th>ARCHVIED</th>
<th>Expiration date</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.IdList)
</td>
#if (item.Closed == "True")
{
<td>YES</td>
}
else
{
<td>NO</td>
}
#if (item.Due != null)
{
<td>
#Html.DisplayFor(modelItem => item.Due)
</td>
}
else
{
<td>
Not Present
</td>
}
</tr>
idList.Add(item.Id);
}
</table>
Let me get you through the execution stack and you'll understand why:
Your MVC view is loaded. When the view is returned to the frontend it is already in Html format. Check Server side rendering here
Basically it means that #foreach (var item in Model) will only execute on the server side and will not re-run when you hit an ajax call. This will only happen on a full post.
While in your page you fire up change dropdown event and the following happens:
An ajax call hit your controller
Data are being returned to the success function
Your success: function () is being executed.
A new form post occurs. See that you didn't do anything with the return data that was returned in the success: function(). You just posted back to the controller
After the post, the full view has returned ignoring any changes in the dropdown and in the data returned.
There are 2 solutions for your problem:
Do a full post and return a new view with the proper data
Write some more javascript to change the DOM inside your sucess function
I have checked JSON string response of at
https://jsonformatter.curiousconcept.com/ and it says that JSON string is valid.
Following is the function which I have used to serialize data to JSON string:
private string getJSONData()
{
obj_userSession = new UserSession();
DataTable dtRender = null;
DataView dvRender = null;
obj_userSession = new UserSession();
if (obj_userSession.LoginData != null && obj_userSession.EmailsDetails != null)
{
dvRender = new DataView(obj_userSession.EmailsDetails);
dtRender = dvRender.ToTable("EmailsDetails", false, "MessageDate", "SentFrom", "MessageBody", "SentTo", "MLSNumber");
return JsonConvert.SerializeObject(dtRender);
}
return "";
}
And here is the response from above function as JSON string:
[
{
"MessageDate": "2016-04-04T05:42:38.273",
"SentFrom": "Site Team",
"MessageBody": "<html>\r\n<head>\r\n\t<style type=\"text/css\">\r\n\t\t.c0 { font-family:'Arial';font-size:10.5pt; }\r\n\t\t.c1 { margin-left:0pt;margin-top:0pt;margin-right:0pt;margin-bottom:7.5pt; }\r\n\t</style>\r\n</head>\r\n<body class=\"c0\">\r\n<p class=\"c1\">Hi Joe, </p>\r\n<p class=\"c1\">Testing Site</p>\r\n<p class=\"c1\">--James</p>\r\n<p class=\"c1\"></p>\r\n</body>\r\n</html>\r\n",
"SentTo": "James",
"Number": ""
}
]
We does not getting any error in code but result not displayed in browser. And gets above mention error in developer tools in browser.
If I removed MessageBody from function getJSONData to avoid it from serializing and remove binding code from design page for MessageBody then it works fine.
What character I have to escape from MessageBody and how to do it?
Edit
This is AngularJS controller function which I have used to get data from:
$scope.browseListing = function (strURL) {
$scope.getURL(strURL);
$http.post($scope.URL)
.then(function (response) {
$scope.Data = response.data;
if ($scope.IsMap)
$scope.LoadMapData();
if ($scope.IsDetails)
$scope.buildReportURL($scope.Data[0].ListingID);
}, function (response) {
$log.info(response);
});
};
And this is the html binding:
<tr ng-repeat="listing in Data">
<td colspan="6">
<table class="tblListingOuter">
<tr>
<th style="width:20%;">
</th>
<th style="width:80%;">
</th>
</tr>
<tr>
<td><b>Date: </b>{{ listing.MessageDate }}</td>
<td><b>Message: </b></td>
</tr>
<tr>
<td><b>Sent By: </b>{{ listing.SentFrom }}</td>
<td rowspan="3">
<pre contenteditable="true" ng-bind-html="listing.MessageBody | unsafe"></pre>
</td>
</tr>
<tr>
<td><b>Sent To: </b>{{ listing.SentTo }}</td>
</tr>
<tr>
<td><b>MLSNO: </b>{{ listing.MLSNumber }}</td>
</tr>
</table>
</td>
</tr>
In Newtonsoft JsonSerializerSettings you have property StringEscapeHandling which specifies how strings are escaped when writing json. code below may work for you
var settings = new JsonSerializerSettings();
settings.StringEscapeHandling = StringEscapeHandling.EscapeHtml;
return JsonConvert.SerializeObject(dtRender, settings)
acceptable values for this property listed in documentation here: http://www.newtonsoft.com/json/help/html/T_Newtonsoft_Json_StringEscapeHandling.htm
you may try other flags to get it working
This is just a guess, but you may try double-escaping the escaped characters in the MessageBody, like this:
[
{
"MessageDate": "2016-04-04T05:42:38.273",
"SentFrom": "Site Team",
"MessageBody": "<html>\\r\\n<head>\\r\\n\\t<style type=\\"text/css\\">\\r\\n\\t\\t.c0 { font-family:'Arial';font-size:10.5pt; }\\r\\n\\t\\t.c1 { margin-left:0pt;margin-top:0pt;margin-right:0pt;margin-bottom:7.5pt; }\\r\\n\\t</style>\\r\\n</head>\\r\\n<body class=\\"c0\\">\\r\\n<p class=\\"c1\"\>Hi Joe, </p>\\r\\n<p class=\\"c1\\">Testing Site</p>\\r\\n<p class=\\"c1\\">--James</p>\\r\\n<p class=\\"c1\\"></p>\\r\\n</body>\\r\\n</html>\\r\\n",
"SentTo": "James",
"Number": ""
}
]
I am working on asp.net MVC 4 application. I have created a list using foreach loop and declared a variable to show record number. Each row has a delete icon, which when clicked, deletes that record and hides that row. this works fine except one issue. When user deletes first record or any record in middle of list, I want the record number of all the rows to be updated accordinlgy.
Here is razor view code:
#{
int i = 1;
foreach (var item in cartItem.CartItemsByStore)
{
<tr id="cartrow-#item.CartItemID">
<td class="transaction">#i</td>
<td class="item-details">
<img src="/images/tmp/order-product.jpg" width="63" height="63">
<div class="desc">
<span>
<p>#item.ItemName</p>
</span>
</div>
</td>
<td class="date-time">15 Jun 2014</td>
<td class="action">
X
</td>
</tr>
<tr class="sp" id="sp-#item.CartItemID">
<td colspan="20"></td>
</tr>
i++;
}
}
and here is deletion code:
$(function () {
// Document.ready -> link up remove event handler
$(".removeCartItem").click(function () {
if (confirm("Click OK if you want to delete this record; otherwise, click 'Cancel'")) {
// Get the id from the link
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
// Perform the ajax post
$.post("/Cart/DeleteCartItem", { "id": recordToDelete },
function (data) {
// Successful requests get here
$('#cartrow-' + recordToDelete).fadeOut('hide');
$('#sp-' + recordToDelete).fadeOut('hide');
$('#spCartCount').text(data);
$('#row-' + recordToDelete).fadeOut('hide');
});
}
}
});
});
Try this
Partial view : "Store.csthml"
#model IEnumerable<CartItemsByStore>
#{
int i = 1;
foreach (var item in Model)
{
<tr id="cartrow-#item.CartItemID">
<td class="transaction">#i</td>
<td class="item-details">
<img src="/images/tmp/order-product.jpg" width="63" height="63">
<div class="desc">
<span>
<p>#item.ItemName</p>
</span>
</div>
</td>
<td class="date-time">15 Jun 2014</td>
<td class="action">
X
</td>
</tr>
<tr class="sp" id="sp-#item.CartItemID">
<td colspan="20"></td>
</tr>
i++;
}
}
CartController:
public ActionResult ReturnView()
{
//populate model
IEnumerable<CartItemsByStore>model =db.GetItemsByStore();
return PartialView("Store",model)
}
public ActionResult DeleteCartItem(int id)
{
//delete
return RedirectToAction("ReturnView");
}
Main View:
<div id="divStore">
#Html.Partial("Store",cartItem.CartItemsByStore)
</div>
$(".removeCartItem").click(function () {
if (confirm("Click OK if you want to delete this record; otherwise, click 'Cancel'")) {
// Get the id from the link
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
// Perform the ajax post
$.post("/Cart/DeleteCartItem", { "id": recordToDelete },
function (data) {
// Successful requests get here
$("#divStore").html(data);
});
}
}
});
I have an error in my partial view : Object reference not set to an instance of an object which I tried to bybpass by adding this line but it seems not working because I got the previous mentionned error.
If I put a break point on the added line (#if (Model.CartItems != null)), the first time, the Model is not null (it contains the item I choose, I deleted it, the Model is NULL but the IF statement throw the error Object reference not set to an instance of an object.
I go in my web store, I selected an item and I clicked remove this item. The item is then deleted from the cart table. But the view is not refreshing (the item is still on the screen. But I received a message saying the item ABC was deleted.
I added this line to try to avoid the object reference error for null but doesn't seems to be the proper command to use. Any idea ?
#if (Model.CartItems != null)
TableContent.cshtml partial view
#model Tp1WebStore3.ViewModels.ShoppingCartViewModel
#{
ViewBag.Title = "Table Content";
}
<a Id="TableContent" href="#" class="TableContent">
<table>
<tr>
<th>
Produit
</th>
<th>
Prix (unitaire)
</th>
<th>
Quantite
</th>
<th></th>
</tr>
#if (Model.CartItems != null) <==== line which I added
{
foreach (var item in Model.CartItems)
{
<tr id="row-#item.ProduitId">
<td>
#Html.ActionLink(item.Produit.Description, "Details", "Produit", new { id =
item.ProduitId }, null)
</td>
<td>
#item.Produit.Prix
</td>
<td id="item-count-#item.PanierId">
#item.Quantite
</td>
<td>
Enlever du panier
</td>
</tr>
}
}
<tr>
<td>
Total
</td>
<td></td>
<td></td>
<td id="cart-total">
#Model.CartTotal
</td>
</tr>
</table>
</a>
Index.cshtml from Panier
#model Tp1WebStore3.ViewModels.ShoppingCartViewModel
#{
ViewBag.Title = "Shopping Cart";
}
<script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.RemoveLink').click(function () {
$.ajax({
url: '/Panier/RemoveFromCart',
data: { id: $(this).data('id') },
type: 'POST',
cache: false,
success: function (result) {
$('#row-' + result.DeleteId).remove();
$('#row-' + result.DeleteId).fadeOut('slow');
$('#cart-status').text('Cart (' + result.CartCount + ')');
$('#update-message').text(result.Message);
$('#cart-total').text(result.CartTotal);
$.get('#Url.Action("TableContent", "Panier")')
$("#TableContent").html(data); });
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
return false;
});
});
</script>
<h3>
<em>Details</em> du panier:
</h3>
<p class="button">
#Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout")
</p>
<div id="update-message">
</div>
<div id="table-content">
#Html.Partial("TableContent") <=== partial view call
</div>
PanierController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Tp1WebStore3.Models;
using Tp1WebStore3.ViewModels;
namespace Tp1WebStore3.Controllers
{
public class PanierController : Controller
{
//
// GET: /Panier/
Tp1WebStoreDBEntities dbProduit = new Tp1WebStoreDBEntities();
//
// GET: /ShoppingCart/
public ActionResult Index()
{
var cart = ShoppingCart.GetCart(this.HttpContext);
// Set up our ViewModel
var viewModel = new ShoppingCartViewModel
{
CartItems = cart.GetCartItems(),
CartTotal = cart.GetTotal()
};
// Return the view
return View(viewModel);
}
//
// GET: /Store/AddToCart/5
public ActionResult AddToCart(int id)
{
// Retrieve the album from the database
var addedProduit = dbProduit.Produits
.Single(produit => produit.ProduitId == id);
// Add it to the shopping cart
var cart = ShoppingCart.GetCart(this.HttpContext);
cart.AddToCart(addedProduit);
// Go back to the main store page for more shopping
return RedirectToAction("Index");
}
//
// AJAX: /ShoppingCart/RemoveFromCart/5
[HttpPost]
public ActionResult RemoveFromCart(int id)
{
// Remove the item from the cart
var cart = ShoppingCart.GetCart(this.HttpContext);
// Get the name of the album to display confirmation
string produitDescription = dbProduit.Paniers
.Single(item => item.PanierId == id).Produit.Description;
// Remove from cart
int itemCount = cart.RemoveFromCart(id);
// Display the confirmation message
var results = new ShoppingCartRemoveViewModel
{
Message = Server.HtmlEncode(produitDescription) +
" has been removed from your shopping cart.",
CartTotal = cart.GetTotal(),
CartCount = cart.GetCount(),
ItemCount = itemCount,
DeleteId = id
};
return Json(results);
/* return View("CartSummary"); */
}
//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]
public ActionResult CartSummary()
{
var cart = ShoppingCart.GetCart(this.HttpContext);
ViewData["CartCount"] = cart.GetCount();
return PartialView("CartSummary");
}
public ActionResult TableContent()
{
return PartialView("TableContent");
}
}
}
Im new on mvc 4 and webAPI and Im developing my first application on it.It is single page application and using Knockoutjs.I use this walkthrough https://github.com/geersch/KnockoutSpa/
every thing is fine with my webAPI method and it return correct value when I call method with Fiddler.But it never called when I use it from getJson() method.Here is my HTML:
<table id="nqsales" class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody data-bind="foreach: viewModel.nqsales">
<tr>
<td data-bind="text: a"></td>
<td data-bind="text: b"></td>
<td data-bind="text: c"></td>
</tr>
</tbody>
</table>
Javascript
$(function () {
ko.applyBindings(viewModel);
viewModel.loadNqsales();
});
var viewModel = {
nqsales: ko.observableArray([]),
loadNqsales: function () {
var self = this;
$.getJSON(
'#Url.RouteUrl("DefaultApi", new { httproute = "", controller = "NQSale" })',
function (nqsales) {
self.nqsales.removeAll();
$.each(nqsales, function (index, item) {
self.nqsales.push(new nqsale(item));
});
}
);
}
};
function nqsale(nqsale) {
this.expenceFormNo = ko.observable(nqsale.a);
this.orderNo = ko.observable(nqsale.b);
this.date = ko.observable(nqsale.c);
}
WebAPIController
// GET api/NQSale
public IEnumerable<NQSaleDto> GetNQSales()
{
//return db.NQSales.AsEnumerable();
return db.NQSales
.AsEnumerable()
.Select(nqlist => new NQSaleDto(nqlist));
}
Your Url construction of
#Url.RouteUrl("DefaultApi", new { httproute = "", controller =
"NQSale" })
should generate a URL of '/api/NQSale' this means that your controller should be the following:
//The controller name relates to the route
public class NQSaleController : ApiController
{
// The action name relates to the HttpVerb
public IEnumerable<NQSaleDto> Get()
{
//return db.NQSales.AsEnumerable();
return db.NQSales
.AsEnumerable()
.Select(nqlist => new NQSaleDto(nqlist));
}
}
By default, the routing for API is that the name of the controller (NQSaleController) relates to the path and the name of the Action (Get) relates to the HttpVerb.
I would guess that your Url is not being generated correctly. If the Javascript in the View currently or in a seperate file ? #Url only works if its in the view.