Develop Reference

ASP.NET MVC - Open Table in new window and print

I'm using ASP.NET MVC and have a table with 9 columns which shows results from the database where the user can filter values based on columns. The table structure looks like this:
<table class="tableMain" id="x">
<thead>
<tr class="trMain">
<th class="thMain">
#Html.DisplayNameFor(model => model.ID)
</th>
<th class="thMain">
#Html.DisplayNameFor(model => model.YEAR)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="trMain">
<td class="tdMain">
#Html.DisplayFor(modelItem => item.ID)
</td>
<td class="tdMain">
#Html.DisplayFor(modelItem => item.YEAR)
</td>
<td class="tdMain">
<input type="checkbox" class="chkCheckBoxId" name="airlineId" value="#item.ID" />
</td>
<td class="tdMain">
#Html.ActionLink("EditValue", "Edit", new { id = item.ID })
</td>
</tr>
}
</tbody>
</table>
Now I need a button, so that the dynamically generated table opens in a new window and the print dialog opens automatically. I had this piece of code:
<div class="line-btn">
<input type="submit" value="print" onclick="printTable()" class="btn fl btn-print">
</div>
<script language="javascript">
function printTable()
{
var printContent = document.getElementById("x");
var windowUrl = 'about:blank';
var num;
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();var printWindow = window.open(num, windowName, 'left=50000,top=50000,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
</script>
The problem here is that the table is completely unsorted when printed so the rows/columns are shifted.
I found this example:
https://datatables.net/extensions/buttons/examples/print/simple.html
This is exactly what I need (open the table in a new window and open print dialog). But unfortunately this sample has a lot of code in the javascript files that I don't need. There is a search field included and a pagination.
Can someone help me please? Thank you very much!

Ok I found a good solution.
This is the code I used:
<script src="#Url.Content("~/Scripts/jquery-3.5.1.js")" type="text/javascript"></script>
<script>
var myApp;
myApp = (function (app) {
$('#x').click(function () {
myApp.print();
});
app.print = function () {
$.ajax({
url: 'Home/Print',
success: function (data) {
if (myApp.arePopupsBlocked()) {
alert('please allow popups.');
}
var printWindow = window.open();
if (printWindow) {
$(printWindow.document.body).html(data);
} else {
alert('please allow popups.');
}
},
error: function () {
alert('Error');
}
});
};
app.arePopupsBlocked = function () {
var aWindow = window.open(null, "", "width=1,height=1");
try {
aWindow.close();
return false;
} catch (e) {
return true;
}
};
return app;
})(window.myApp || {})
</script>
and right before the table-tag the link to click:
<style>
/* suppress link for printing */
##media only print {
a {
display: none;
}
}
</style>
[print table]
There opens no new window but the table is well formated for printing.

MVC - 'Index' or its master was not found

I am getting an error message that says:
Exception Details: System.InvalidOperationException: The view 'Index' or its
master was not found or no view engine supports the searched locations. The
following locations were searched:
~/Views/Request/Index.aspx
~/Views/Request/Index.ascx
~/Views/Shared/Index.aspx
~/Views/Shared/Index.ascx
~/Views/Request/1819.master
~/Views/Shared/1819.master
~/Views/Request/1819.cshtml
~/Views/Request/1819.vbhtml
~/Views/Shared/1819.cshtml
~/Views/Shared/1819.vbhtml
I've seen several different post about this but none of those answers have solved my problem. I tried clicking through the views in visual studio and it sends me to the appropriate methods. I tried adding a home controller with a home view and an Index but that does not help as well. I tried modifying my route config and that didn't work either.
Here is my return statement that is giving me issues:
return View("Index", requestVM.AidYear);
I am calling this method:
public ActionResult Index(string aidYear)
I tried this:
return View("Index", (object)requestVM.AidYear);
and I tried this:
return View("Index", model:requestVM.AidYear);
With the last 2 I get:
System.InvalidOperationException: The model item passed into the dictionary is of type 'System.String', but this dictionary requires a model item of type 'ScholarshipDisbursement.ViewModels.Request.RequestViewModel'.
This occurs on my local machine and on our production server. The team I'm on are sure that this was working when we published it because this is a pretty big issue to not have noticed so we aren't sure why it is no longer working. No changes have been made to production since we published this application so we know no one has done something to screw it up.
Just in case this helps here is my route config:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Request", action = "Index", id = UrlParameter.Optional }
);
}
Edit:
In my view I have a folder Request and inside that folder is an Index.cshtml. On that view I have a form that submits to the method SubmitScholarshipRequest. That method is on the Request Controller.
In that method I run various checks and if there is an error I add it to the ModelState. If the ModelState is invalid I then:
return View("Index", requestVM.AidYear);
Otherwise I:
return RedirectToAction("Index", "Request", new { #aidYear = requestVM.AidYear });
Here is my view:
#using ScholarshipDisbursement.Helpers
#using ScholarshipDisbursement.ViewModels.Request
#model RequestViewModel
#{
ViewBag.Title = "Scholarship Request";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="requestIndexRoundedShadow">
<div class="pageTitleHeader">
<span><img src="~/Content/img/gradCap.ico" class="headerImg" /></span>
<span class="headerTitle"><b>Scholarship Disbursement Request</b></span>
<hr style="border-top: 1px solid black">
#using (Html.BeginForm("SubmitScholarshipRequest", "Request",
FormMethod.Post, new { id = "SubmitTutorRequestFrm" }))
{
#Html.AntiForgeryToken()
<span id="aidYearLbl" Style="font-size: 14px;font-weight: bold">Academic
Year: </span>
#Html.DropDownListFor(m => m.AidYear, new SelectList(Model.AidYears,
"Code", "Name"), new { id = "aidYear", onchange = "onChangeYear()", Style =
"font-size: 14px" })
if (Model.Scholarships.Any())
{
<br />
<br />
<table style="width: 100%;">
<tr>
<th class="headerBox tableHeader" colspan="3">Scholarships
for #Model.User.DeptName</th>
</tr>
<tr>
<th class="headerBox columnHeader" style="width:
500px;">Scholarship Name</th>
<th class="headerBox columnHeader" style="width:
100px;">Amount</th>
<th class="headerBox columnHeader" style="width:
100px;">Requested</th>
</tr>
#{ int i = 1; }
#foreach (var s in Model.Scholarships)
{
var rowColor = i % 2 == 0 ? "E8E8E8" : "ffffff";
<tr style="background-color: ##rowColor;">
<td class="rowValue">#Html.ActionLink(s.Name,
"ScholarshipRequest", "Request", new { aidYear = s.AidYear, fundCode = s.Id,
}, new { target = "_blank" })</td>
<td class="rowValue">#s.AmountTotal</td>
<td class="rowValue">#s.AmountRequested</td>
</tr>
i++;
}
</table>
<br />
<br />
if (Model.AvailScholarships.Any())
{
<table style="width: 100%">
<tr>
<th class="headerBox tableHeader" colspan="6">Request
Scholarship</th>
</tr>
<tr>
<th class="headerBox columnHeader">Scholarship</th>
<th class="headerBox columnHeader">Banner Id</th>
<th class="headerBox columnHeader">Student Name</th>
<th class="headerBox columnHeader">Amount</th>
<th class="headerBox columnHeader">Term</th>
<th class="headerBox columnHeader">Comments</th>
</tr>
<tr>
<td class="rowValue" style="width: 200px">#Html.DropDownListFor(m => m.ScholarshipId, new SelectList(Model.AvailScholarships, "Id", "Name"), "", new { id = "scholars" })</td>
<td class="rowValue" style="width: 125px">#Html.TextBoxFor(m => m.StudentId, new { autocomplete = "off", Style = "width:100%", id = "bannerId", maxlength = "9" })</td>
<td class="rowValue" style="width: 225px"><span id="studentName"></span></td>
<td class="rowValue" style="width: 50px">#Html.TextBoxFor(m => m.Amount, new { autocomplete = "off", Style = "width:100%", id = "amount", Value = "", data_val_number = " " })</td>
<td class="rowValue" style="width: 70px">#Html.DropDownListFor(m => m.Term, new SelectList(Model.Terms, "Code", "Name"), "", new { Style = "width:70px", id = "term" })</td>
<td class="rowValue" style="width: auto">#Html.TextBoxFor(m => m.Comments, new { autocomplete = "off", Style = "width:100%", id = "comments" })</td>
</tr>
<tr>
<td>#Html.ValidationMessageFor(m => m.ScholarshipId)</td>
<td>#Html.ValidationMessageFor(m => m.StudentId)</td>
<td></td>
<td>#Html.ValidationMessageFor(m => m.Amount)</td>
<td>#Html.ValidationMessageFor(m => m.Term)</td>
<td>#Html.ValidationMessageFor(m => m.Comments)</td>
</tr>
</table>
<br />
<input type="submit" id="SubmitNomineeBtn" name="SubmitNomineeBtn" class="submitButton" value="Submit" />
<span id="warning"></span>
<br />
<br />
<div class="field-validation-error">
#Html.ErrorFor(ViewData, "ExceedsAmountError")
</div>
<div class="field-validation-error">
#Html.ErrorFor(ViewData, "DuplicateEntryError")
</div>
<div class="field-validation-error">
#Html.ErrorFor(ViewData, "NullStudent")
</div>
<div class="field-validation-error">
#Html.ErrorFor(ViewData, "NegativeAmount")
</div>
}
else
{
<div style="padding-right: 100px">
<img src="~/Content/img/alert.png" /> There are currently no funds available for the #Model.User.DeptName department.
</div>
}
}
else
{
<br />
<br />
<div style="padding-right: 100px">
<img src="~/Content/img/alert.png" /> There are currently no scholarships available for the #Model.User.DeptName department.
</div>
}
}
</div>
<script>
$('#help').click(function() {
var win = $('#window').data("kendoWindow");
win.open();
win.center();
win.top();
});
$(document).ready(function () {
if ($('#bannerId').val()) {
checkBannerId();
}
});
function checkBannerId() {
var student = $('#bannerId').val();
$.ajax({
type: "POST",
url: '#Url.Action("GetStudentName","Request")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ bannerId: student }), // parameter aNumber
dataType: "json",
success: function (msg) {
if (msg.Result === "Null Student") {
$('#studentName').html("Error finding student name");
$('#studentName').css("color", "red");
$('#bannerId').css("border-color", "red");
$('#bannerId').css("color", "red");
$('#warning').html("Invalid Banner Id.");
$('#warning').css('color', 'red');
return;
} else {
$('#bannerId').css("border-color", "unset");
$('#bannerId').css("color", "black");
$('#studentName').html(msg.Result);
$('#studentName').css('color', 'black');
$('#warning').html("");
$('#warning').css('color', 'unset');
}
},
error: function () {
}
});
}
function onChangeYear() {
window.location = '#Url.Action("Index", "Request")?aidYear=' + $("#aidYear").val();
}
$('#amount').blur(function () {
if (isNaN($('#amount').val()) || $('#amount').val() < 0) {
$('#warning').html("Invalid amount ($, commas, and negative numbers not allowed).");
$('#warning').css('color', 'red');
$('#amount').css("border-color", "red");
$('#amount').css('color', "red");
} else {
$('#amount').css("border-color", "unset");
$('#amount').css("color", "unset");
$('#warning').html("");
$('#warning').css('color', 'unset');
}
});
$('#bannerId').blur(function () {
checkBannerId();
});
</script>
Here is the method the form calls:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SubmitScholarshipRequest(RequestViewModel requestVM)
{
var scholarshipMgr = new ScholarshipStore();
var scholarship = scholarshipMgr.GetScholarship(requestVM.ScholarshipId, requestVM.AidYear);
double amountTotal = scholarship.AmountTotal;
double amountRequested = scholarship.AmountRequested;
double addTotal = amountRequested + requestVM.Amount;
string username = User.Identity.Name;
var user = new UserStore().GetUser(username);
var student = new StudentStore().GetStudent(requestVM.StudentId);
if (student == null)
{
ModelState.AddModelError("NullStudent","Unable to find Student");
}
var scholarshipRequestMgr = new ScholarshipRequestStore();
var scholarshipRequest = scholarshipRequestMgr.GetScholarshipRequest(requestVM.StudentId, requestVM.ScholarshipId, requestVM.AidYear);
if (scholarshipRequest != null)
{
ModelState.AddModelError("DuplicateEntryError", "Scholarship already requested for this student!");
}
if (addTotal > amountTotal)
{
ModelState.AddModelError("ExceedsAmountError", "Amount entered exceeds the total available!");
}
if (addTotal < 0)
{
ModelState.AddModelError("NegativeAmount", "Must be a positive number");
}
if (!ModelState.IsValid)
{
var aidYears = new AidYearStore().GetAidYears();
var scholarships = new ScholarshipStore().GetScholarships(user.DeptCode, requestVM.AidYear);
var availableScholarships = scholarships.Where(x => x.AmountTotal > x.AmountRequested);
var terms = new TermStore().GetAllTerms();
requestVM.AidYears = aidYears;
requestVM.User = user;
requestVM.Scholarships = scholarships;
requestVM.AvailScholarships = availableScholarships;
requestVM.Terms = terms;
return View("Index", requestVM.AidYear);
}
var scholarShipRequest = new ScholarshipRequest
{
AidYear = requestVM.AidYear,
ScholarshipId = requestVM.ScholarshipId,
StudentId = requestVM.StudentId,
Amount = requestVM.Amount,
TermCode = requestVM.Term,
Comments = requestVM.Comments,
DeptId = user.DeptCode,
DateCreated = DateTime.Now,
CreatedBy = username,
PIDM = new StudentStore().GetStudent(requestVM.StudentId).PIDM
};
new ScholarshipRequestStore().CreateScholarshipRequest(scholarShipRequest);
return RedirectToAction("Index", "Request", new { #aidYear = requestVM.AidYear });
}
Here is the Index View Method from the RequestController:
public ActionResult Index(string aidYear)
{
aidYear = string.IsNullOrEmpty(aidYear) ? new FinAidYear().GetCurrentYear() : aidYear;
string username = User.Identity.Name;
if (!Authorization.CheckUsernameDept(username))
return RedirectToAction("NotAuthorized", "Account");
var user = new UserStore().GetUser(username);
var aidYears = new AidYearStore().GetAidYears();
var scholarships = new ScholarshipStore().GetScholarships(user.DeptCode, aidYear);
var availableScholarships = scholarships.Where(x => x.AmountTotal > x.AmountRequested);
var terms = new TermStore().GetAllTerms();
var requestVM = new RequestViewModel
{
AidYear = aidYear,
AidYears = aidYears,
User = user,
Scholarships = scholarships,
AvailScholarships = availableScholarships,
Terms = terms
};
return View(requestVM);
}

Your view expects a RequestViewModel, not a string. So giving it just the aid year will not work. That's what the "Index" action method expects, but here we're just loading the view directly, not executing the action method (after all, we're already executing a different action method). So you need to pass the whole viewmodel object in the return statement.
Additionally, because it's not an action method called "Index", you'll need to specify the name of the view you want to return.
I would expect that
return View("Index", requestVM);
would solve your problem.

It seems your view has the header :
#model ScholarshipDisbursement.ViewModels.Request.RequestViewModel
So, you should use that :
return View(requestVM);
For the application is expected all the viewModel.
Otherwise, we will need your structure for a better help.

I think the clue is in the error message. It's looking for a view named 1819.cshtml.
This is telling it to look for a view with the value of requestVM.AidYear to use for the master or template page.
return View("Index", requestVM.AidYear);
If you wanted to pass a model to the view use this instead. Instead of a string (which I assume requestVM.AidYear is) I'm passing something that's not a string. So it'll use requestVM as the model.
return View("Index", requestVM);
Alternatively, this may be what you want. to use
return RedirectToAction("Index", "Request", new { #aidYear = requestVM.AidYear });

Jquery ui Dialog in an MVC listing table

I have a listing table displaying some information from the database.
What i am trying to do is to check if the item status is 1 and if comments exists to display a little icon where the user will click on it and see the specific comment for that item.
So in the listing table it seems to display fine that icon according to the above criteria but when i click on a specific listing it opens all dialogs with comments for all other listings with the same item status instead of the one i have chosen.
Can you please help me on what am i doing wrong ?
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.BookingId)
</td>
<td>
<a href="#Url.Action("ItemDetails", new {id=item.ItemId })" title="#item.Item.ItemDescription">
#Html.DisplayFor(modelItem => item.Item.ItemName)
</a>
</td>
<td>
#Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.EndDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequestDate)
</td>
#if (item.StatusCodeId == 1)
{
<td style="color:#DD7500">
#Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
#if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> #item.Comments</p>
</div>
}
</td>
}
}
</tr>
}
</table>
<script> $(function ()
{
$(" .orangedialog").dialog({
autoOpen: false,
show: { effect: "blind", duration: 1000 },
hide: { effect: "explode", duration: 1000 },
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$('.orangeclicker').live("click", function () {
$(".orangedialog").dialog("open");
});
});
</script>

You should try this:
first;you have to create links in each row of table having same class.
<a class="comments">Comments</a>
second; update your page as:
<div id="dialog-details" style="display: none">
<p>
#if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> #item.Comments</p>
</div>
}
</p>
</div>
third update your script as:
$('.comments').click(function () {
$("#dialog-details").dialog('open');
return false;
});
$("#dialog-details").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
</script>

They all have the same id or class ( because they are render in a foreach statement )
You can add a difference by combining the class or the id with the index from your list
I don't have the code in front of me, but I also think something like this would work.
UPDATE:
$('.orangeclicker').live("click", function (e) {
alert("check"); // if this fires at click, the problem is somewhere else
var target= $(e.currentTarget);
target.next().dialog("open");
});

You should Use $(this).next().next().find(".orangedialog") to find relevent element.
$('.orangeclicker').on("click", function (e) {
$element = $(this).next().next().find(".orangedialog");
$element.dialog("open");
});
Update
Use on() instead of live()
See DEMO

Selection in the Controller is not matching

I got this error when I am trying to remove the item from the Cart table.
HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /Panier/RemoveFromCart/1. This URL seems to be fine with me. It should branch to the PanierController at RemoveCart. I don't understand why it is not branching.
Thanks
Index.cshtml
#model Tp1WebStore3.ViewModels.ShoppingCartViewModel
#{
ViewBag.Title = "Shopping Cart";
}
<script src="/Scripts/jquery-1.4.4.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// Document.ready -> link up remove event handler
$(".RemoveLink").click(function () {
// Get the id from the link
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
// Perform the ajax post
$.post("/ShoppingCart/RemoveFromCart", {"id": recordToDelete },
function (data) {
// Successful requests get here
// Update the page elements
if (data.ItemCount == 0) {
$('#row-' + data.DeleteId).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteId).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
});
}
});
});
</script>
<h3>
<em>Details</em> du panier:
</h3>
<p class="button">
#Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout")
</p>
<div id="update-message">
</div>
<table>
<tr>
<th>
Produit
</th>
<th>
Prix (unitaire)
</th>
<th>
Quantite
</th>
<th></th>
</tr>
#foreach (var item in Model.CartItems)
{
<tr id="row-#item.ProduitId">
<td>
#Html.ActionLink(item.Produit.Description,"Details", "Store", new { id =
item.ProduitId }, null)
</td>
<td>
#item.Produit.Prix
</td>
<td id="item-count-#item.ProduitId">
#item.Quantite
</td>
<td>
#Html.ActionLink("Enlever du panier", "RemoveFromCart", "Panier", new { id =
item.ProduitId }, null)
</td>
</tr>
}
<tr>
<td>
Total
</td>
<td></td>
<td></td>
<td id="cart-total">
#Model.CartTotal
</td>
</tr>
</table>
PanierController.cs
namespace Tp1WebStore3.Controllers
{
public class PanierController : Controller
{
Tp1WebStoreDBEntities dbProduit = new Tp1WebStoreDBEntities();
[HttpPost]
public ActionResult RemoveFromCart(int id)
{
// Remove the item from the cart
var cart = ShoppingCart.GetCart(this.HttpContext);
// Get the name of the product 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 View("Details");
}

Your RemoveFromCart controller action is decorated with the [HttpPost] attribute meaning that it is ONLY accessible by POST verbs. But in your view you seem to have generated some action link to it:
#Html.ActionLink(
"Enlever du panier",
"RemoveFromCart",
"Panier",
new { id = item.ProduitId },
null
)
But as you are well aware, an Html.ActionLink translates into an <a> tag in your markup which obviously is sending a GET request to the server when clicked.
So basically you have 3 possibilities here:
Use an Html.BeginForm instead of an ActionLink to refer to this action which would allow you to send a POST request
Get rid of the [HttpPost] attribute from your RemoveFromCart action
AJAXify the anchor which would allow you to use a POST request.

How can I update a Table without refresh the entire site razor

Hi I'm working on a table
I cannot atm update the table without the site refreshing.
I need a way to easily
Add a row ,Delete a row, Modify a row in a table's content.
my table is build like this.
{....}
#using (Html.BeginForm())
{
<fieldset>
<legend>ShiftTypes</legend>
<table class="EditableTable" id="EditableTableShiftTypes">
<thead>
<tr>
<th>
#:
</th>
<th>
ShiftName:
</th>
<th>
ShiftCode:
</th>
<th>
Suplement:
</th>
<th>
ExtraSuplement:
</th>
<th>
</th>
</tr>
</thead>
<tbody>
#foreach (BPOPortal.Domain.Models.ShiftTypeView type in Model.ShiftTypeList)
{
<tr>
<td>
#type.ID
</td>
<td>
#type.ShiftName
</td>
<td>
#type.Name
</td>
<td>
#type.Supplement
</td>
<td>
#type.OneTimePayment
</td>
<td>
<button>
Delete</button>
</td>
</tr>
}
<tr>
<td>
<label>
</label>
</td>
<td>
#Html.Editor("ShiftName")
</td>
<td>
#Html.Editor("ShiftCode")
</td>
<td>
#Html.Editor("Suplement")
</td>
<td>
#Html.DropDownList("ExtraSuplement", new SelectListItem[] { new SelectListItem() { Text = "yes", Value = "true", Selected = false }, new SelectListItem() { Text = "No", Value = "false", Selected = false } }, "--Choose--")
</td>
<td>
<button id="AddButton">
Add</button>
</td>
</tr>
</tbody>
</table>
<button type="submit" id="Gem">
Save</button>
</fieldset>
{....}
I've Tried to use Ajax in the following way but it refreshes the entire page.
{....}
var ID= 2;
$("#AddButton").click(function(){
var ShiftName= $('#ShiftName').attr('value');
var ShiftCode= $('#ShiftCode').attr('value');
var Suplement= $('#Suplement').attr('value');
var ExtraSuplement= $('#ExtraSuplement').attr('value');
$.ajax({
url: '#Url.Action("AddData", "ShiftTypesConfiguration")',
data: { ID: ID.toString(), ShiftName: $('#ShiftName').attr('value'), ShiftCode: $('#ShiftCode').attr('value'), Suplement: $('#Suplement').attr('value'), ExtraSuplement: $('#ExtraSuplement').attr('value') },
type: 'POST',
// contentType: 'application/json; charset=utf-8;',
dataType: 'json',
success: function (response)
{
function fnClickAddRow() {
$('#EditableTableShiftTypes').dataTable().fnAddData([
response.ID,
response.ShiftName,
response.ShiftCode,
response.Suplement,
response.ExtraSuplement,
"<button>Delete</button>"]); }
}
});
ID++;
});
{....}
</script>
My Method in the Controller that should handle the request.
public JsonResult AddData(string ID, string ShiftName, string ShiftCode, string Suplement, string ExtraSuplement)
{
TableViewModel tableViewModel = new TableViewModel();
tableViewModel.ID = ID;
tableViewModel.ShiftName= ShiftName;
tableViewModel.ShiftCode= ShiftCode;
tableViewModel.Suplement= Suplement;
tableViewModel.ExtraSuplement= ExtraSuplement;
return Json(tableViewModel);
}
However it doesn't seem to work Now I'm asking For Ideas and ways to make this better/easier/Working
Edit:saw a copy past Error
EDIT2: I've now changed it slightly I found that I had a error in how my script was running this is the latest. there are still problems but at least now I can see and describe the error.
this is what I changed the script is now
$("#AddButton").click(function (event) {
event.preventDefault();
var ShiftName = $('#ShiftName').attr('value');
var ShiftCode = $('#ShiftCode').attr('value');
var Suplement = $('#Suplement').attr('value');
var ExtraSuplement = $('#ExtraSuplement').attr('value');
$.ajax({
url: '#Url.Action("AddData", "ShiftTypesConfiguration")',
data: { ID: ID.toString(), ShiftName: ShiftName, ShiftCode: ShiftCode, Suplement: Suplement, ExtraSuplement: ExtraSuplement },
type: 'POST',
// contentType: 'application/json; charset=utf-8;',
dataType: 'json',
success: function (response) {
function fnClickAddRow() {
$('#EditableTableShiftTypes').dataTable().fnAddData([
response.ID,
response.ShiftName,
response.ShiftCode,
response.Suplement,
response.ExtraSuplement,
"<button>Delete</button>"]);
}
}
});
ID++;
});
now with the help of firebug I've seen that the values are back on the page but before I can see them the page is refreshed.

I am not writing in code here, but here is how you should do it.
On Add/Edit/Delete make an ajax call to your action. In your Action implement your operation (Add/Edit/Delete) and depending on operation completed successfully or failed due to some error, return a true/false flag as json.
Then in the success function success: function (response){} of the ajax call, check wether the value returned is a true/false which means success or error.
And then using some jquery you can add a row or delete a row from the table.
Check out these links : http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/