I`m using Ajax call to remove items from list. When user clicks on remove button (each button for row with id) it sends Ajax call (Post) to Order/RemoveFromCart. When backend is reached i remove the item from list. Im sure when returning data from controller the item i want to remove is truly removed. The problem is when i take my div and call html(data) from response it removes always the last item in the list.
Thank you for help.
I have tried update dotnet to latest version.
I have tried to remove Ajax call and reload whole view - that fixes the problem but i want to use an Ajax call.
#for (int i = 0; i < Model.CartItems.Count; i++)
{
<input asp-for="CartItems[i].ProductId" type="hidden">
<tr>
<td>
<input type="text" class="inputTextWithoutBorder" readonly="readonly" asp-for="CartItems[i].Product">
</td>
<td>
<select class="select-table" asp-for="#Model.CartItems[i].Packaging" asp-items="#Model.CartItems[i].PackageTypes"></select>
</td>
<td>
<input type="text" class="inputTextWithoutBorder" asp-for="#Model.CartItems[i].Amount" placeholder="Vyberte množství...">
</td>
<td>
<button id="removeFromCartId" onclick="removeFromCart(this);" type="button" value="#i" class="removeButton"></button>
</td>
</tr>
}
[HttpPost]
public IActionResult RemoveFromCart(OrderModel model, int itemToRemove)
{
if (model.CartItems[itemToRemove] != null)
{
model.CartItems.RemoveAt(itemToRemove);
}
return PartialView("_OrderCartWithCalendarPartial", model);
}
Model:
public class CartModel
{
public int ProductId { get; set; }
public int Amount { get; set; }
public string Packaging { get; set; }
public string Product { get; set; }
public List<SelectListItem> PackageTypes { get; } =
new List<SelectListItem>{
new SelectListItem {Value = "", Text = ""},
};
}
Javascript:
function removeFromCart(button) {
var index = button.value;
var placeholderElement = $('#orderFormId');
var myformdata = placeholderElement.serialize()
+ "&itemToRemove=" + index;
var result = $.post("/Order/RemoveFromCart", myformdata);
result.done(function (data) {
$("#cartWithCalendarDiv").html(data);
setDateFieldToZero();
});
}
Problem scenario:
Sending via Ajax list with two items (item0, item1). The controller receives exact list with two items. Remove item0 in controller and return partial view with that updated model. The page reloads only with item0. Why?
Related
i have this view in my project.
I want to get the text of input in each row that is selected.
How to pass all text of input selected row into action
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th width="45%">Select</th>
<th width="45%">User Name</th>
<th width="5%">Description</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TypeList)
{
<tr>
<td>
<input type="checkbox" name=checklist" id="checklist"/>
</td>
<td>
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
<input type="text" name="Extradecription"/>
</td>
</tr>
}
</tbody>
my Actions. How can I have the corresponding values of text and checkbox for the Selected rows
public IActionResult Index()
{
return View(repository.GetUser());
}
public IActionResult Save(int[] checklist,string[] Extradecription)
{
repository.Save(checklist,Extradecription);
return View(repository.GetUser());
}
If you try to get two different arrays as you have showed in you controller-action code, there will be a trouble with text for non selected items, the array for check boxes will bind as expected but for descriptions will be different, just to be clear, check the following example:
Assuming We have a list with tree options:
100 - Foo
200 - Bar
300 - Zaz
If We set the following selection for items:
Foo, a
Zaz, c
If We take a look on the request, this is the raw request:
checklist = 100,300
Extradecription = a,null,c
So, the trouble is avoid to bind null descriptions for non selected options, this is complicated, in that case I recommend to you a clear solution:
Create a model to create entity process
Create a model for option
Add a list of option model in create entity model
Initialize the model to create a new entity
Render inputs in view using asp-for tag
Retrieve the request to create a new entity
I'll assume the name of models and properties to show how to bind a typed array in your request, change the names according to your scenario.
Create entity model:
public class CreateEntity
{
public CreateEntity()
{
Items = new List<SelectedItem>();
}
// Step 3
[BindProperty]
public List<SelectedItem> Items { get; set; }
// Another properties
}
Model for option:
public class SelectedItem
{
public bool IsSelected { get; set; }
public int Code { get; set; }
public string Name { get; set; }
public string Desc { get; set; }
}
Rendering the options list:
#for (var i = 0; i < Model.Items.Count; i++)
{
<input asp-for="#Model.Items[i].IsSelected" />#Model.Items[i].Name
<input asp-for="#Model.Items[i].Desc" />
<br/>
}
The GET and POST actions in controller:
[HttpGet]
public IActionResult CreateOption()
{
// Set the items list
var model = new CreateEntity
{
Items = new List<SelectedItem>
{
new SelectedItem{ Code = 100, Name = "Foo" },
new SelectedItem{ Code = 200, Name = "Bar" },
new SelectedItem{ Code = 300, Name = "Zaz" }
}
};
return View(model);
}
[HttpPost]
public IActionResult CreateOption(CreateEntity form)
{
// Retrieve only selected items
var query = form.Items.Where(item => item.IsSelected == true).ToList();
return View();
}
If you want to know more about check boxes in Razor pages, please check this link: Checkboxes in a Razor Pages Form
Please let me know if this answer is useful.
I am new to MVC.Basically I need to pass values entered in the textbox from my view to controller action method. As I enter the values in the text box and click the enter button I need to display the value on the screen. I am currently unable to do so. Please find my code below
The model class
public class ProteinTrackingService
{
public int? Total { get; set; }
public int Goal { get; set; }
public void AddProtein(int? amount)
{
Total += amount;
}
}
The controller class
public class ProteinTrackerController : Controller
{
ProteinTrackingService proteinTrackingService = new ProteinTrackingService();
// GET: ProteinTracker
public ActionResult Index()
{
ViewBag.Total = proteinTrackingService.Total;
ViewBag.Goal = proteinTrackingService.Goal;
return View();
}
// GET: ProteinTracker/Details/5
public ActionResult AddProtein(ProteinTrackingService model)
{
proteinTrackingService.AddProtein(model.Total);
ViewBag.Total = proteinTrackingService.Total;
ViewBag.Goal = proteinTrackingService.Goal;
return View("Index");
}
}
The view
using (Html.BeginForm("ProteinTracker", "AddProtein",FormMethod.Post))
{
#Html.AntiForgeryToken()
<form>
<div class="form-horizontal">
<h4>Protein Tracker</h4>
<hr />
Total : #ViewBag.Total
Goal : #ViewBag.Goal
<input id="Text1" type="text" value="TextInput" /> <input type="Submit" value="Add" />
</div>
</form>
}
I am modifying the code above based on your suggestions. I basically need to display the following in the view
Total : value
Goal : value
Textbox control (To enter the total) Button (pass the total to contoller) Please note that when the user clicks the Add button the total should show in above field Total : value.
New View
#using (Html.BeginForm( "AddProtein","ProteinTracker", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Protein Tracker</h4>
<hr />
#Html.LabelFor(m => m.Total, "Total" ) <hr />
#Html.LabelFor(m => m.Goal, "Goal") <hr />
#Html.TextBoxFor(m => m.Total) <hr />
<input type="Submit" value="Add" />
</div>
}
New Controller
public class ProteinTrackerController : Controller
{
ProteinTrackingService proteinTrackingService = new ProteinTrackingService();
// GET: ProteinTracker
public ActionResult Index()
{
var model = new ProteinTrackingService()
{ Total = proteinTrackingService.Total, Goal = proteinTrackingService.Goal };
return View(model);
}
// GET: ProteinTracker/Details/5
public ActionResult AddProtein(ProteinTrackingService model)
{
proteinTrackingService.AddProtein(model.Total);
model.Total = proteinTrackingService.Total;
model.Goal = proteinTrackingService.Goal;
return View("Index",model);
}
}
You need to add the HttpPost attribute to your action.Looking at your form #using (Html.BeginForm( "AddProtein","ProteinTracker", FormMethod.Post)) , apparently you are sending a post request to your controller.
[HttpPost]
public ActionResult AddProtein(ProteinTrackingService model)
{
proteinTrackingService.AddProtein(model.Total);
model.Total = proteinTrackingService.Total;
model.Goal = proteinTrackingService.Goal;
return View("Index",model);
}
First of all your this syntax
using (Html.BeginForm("ProteinTracker", "AddProtein", FormMethod.Post))
already creates a form tag when html generates. No need to create from tag again in it.
So for your want, in view you need give to your input field a name
<input id="Text1" type="text" value="TextInput" name="textname"/>
and add this name as parameter in your controller method like that
public ActionResult AddProtein(ProteinTrackingService model,string textname)
{
// your code
return View("Index");
}
It will pass your textfield value from view to controller. For clearing your concept you may visit Loopcoder.com
I have a textbox in my mvc view.I want to pass the textbox data in beginform route values.how to do that?
View:
#using (Html.BeginForm("Index", "InwardDetail", FormMethod.Post))
{
<fieldset style="width:80%;margin-left:auto;margin-right:auto;margin-top:20px;min-width:60%">
<div>
<table class="tableView" style="width:100%">
<tr>
<td>
#Html.DevExpress().Label(lbl=>{
lbl.Name = "lblFromDate";
lbl.Text = "From Date";
}).GetHtml()
</td>
<td>
#Html.TextBox("txtFromDate", value: DateTime.Now.ToString("dd/MM/yyyy"), htmlAttributes: new {id="fromDate", Class="textbox",style="width:70px"})
</td>
<td>
#Html.DevExpress().Button(but=>{
but.Name = "butView";
but.Text = "View";
but.UseSubmitBehavior = true;
}).GetHtml()
</td>
</tr>
<tr>
<td colspan="9">
#Html.Partial("InwardDetailPartial")
</td>
</tr>
</table>
</div>
</fieldset>
}
Controller:
public ActionResult Index(string fDate)
{
_unitOfWork = new UnitOfWork();
blInwarddetail = new InwardRegisterBL(_unitOfWork);
var result = blInwarddetail.GetInwardList(fDate);
return View("Index", result);
}
If I click Button the values should be passed to controller.
Your use of #Html.TextBox("txtFromDate", ..) means you generate an input with name="textFromDate". When you submit a form, the name/value pairs of the forms controls are sent - in your case it would be txtFromDate: 27/06/2015.
But the method your posting to does not have a parameter named txtFromDate (only one named fDate). You need to change the method to
[HttpPost]
public ActionResult Index(string txtFromDate)
{
....
}
However there are numerous issues with your code that you should address
First you should create a view model to represent what your wanting to display/edit in a view
public class FilterViewModel
{
[Display(Name = "...")] // some user friendly display name
[Required(ErrorMesage = "Please enter a valid date")]
public DateTime Date { get; set; }
}
Note from the code you have shown it appears your entering a date, not a string so the property should be DateTime (not string). This also ensures that you get client and server validation for the property. I also give your properties a more descriptive name that fDate (I can't begin to guess what that might mean - maybe FinishDate?)
In the GET method
public ActionResult Index()
{
FilterViewModel model = new FilterViewModel();
model.Date = DateTime.Today;
return View(model);
}
And in the view
#model yourAssembly.FilterViewModel
#using (Html.BeginForm())
{
....
#Html.LabelFor(m => m.Date)
#Html.TextBoxFor(m => m.Date, "{0:dd/MM/yyyy}", new { #class = "textbox" })
#Html.ValidationMessageFor(m => m.Date)
....
}
Note that you are now strongly binding to your model property. The second parameter specifies the format string. There seems no need to override the id property (which will be id="Date"), and to add a class name use #class = "..". Note also since you are adding a class name, you should remove style="width:70px" and instead use css. You should also remove the table elements. Html table elements are used for tabular data, not for layout.
And finally the post method will be
[HttpPost]
public ActionResult Index(FilterViewModel model)
{
if (!ModelState.IsValid)
{
return View(model);
}
// model.Date will contain the value enter by the user
}
Finally I would question if this really should be a POST. Form the code, you don't appear to be changing any data and perhaps this should be FormMethod.GET? Or better, use ajax to update the current page based on the filter.
I am working on an MVC4 application. In the submit action of the button, i am making a call to a controller action, which will return data back to me as Json. Number of rows in the table is dependent on the number of rows returned by the service.
I have created a new View Model to support this.
public class DataResponse
{
public List<ALSResult> Result { get; set; }
public string ResponseText {get;set;}
}
public class ALSResult
{
public string Name {get;set;}
public string DataResult {get;set;}
}
Controller Action
[HttpPost]
public ActionResult Submit(CViewModel calcModel)
{
try
{
DataResponse response = cRepository.GetDetails(calcModel.SelectedPlan,calcModel.EquipmentPrice,calcModel.DownPayment);
return Json(response, JsonRequestBehavior.DenyGet);
}
}
js file
$("#Submit").click(function () {
other code here
Process("/DPPC/Submit", "POST", JSON.stringify(model), "json", "application/json;charset=utf-8", logError, InvokeSuccess);
}
function InvokeSuccess(result) {
i will get json result in result filed
}
index.cshtml
<table id="tblResults">
<tr>
<td id="tdResultEt"></td>
<td id="tdResultEtPrice"></td>
</tr>
<tr>
<td id="tdResultDt"></td>
<td id="tdResultDtPrice"></td>
</tr>
more rows depending on the number of items in the JSON response
</table>
How do i dynamically bind the response from the Service to create rows for the table and bind the results?
I don't test it, and it maybe contain syntax errors
function InvokeSuccess(result) {
var table = $("#tblResults");
for(var i = 0; i < result.Result.lenght; ++i)
{
var item = result.Result[i];
var newTr = $("<tr>");
var newTd1 = $("<td>");
var newTd2 = $("<td>");
newTd1.text(item.Name);
newTd2.text(item.DataResult);
newTr.append(newTd1);
newTr.append(newTd2);
table.append(newTr);
}
}
I have run into an issue that seems pretty simple, but I have not been able to find a solution. I have created a ReportModel object that is the model in the view. The ReportModel contains a list of FinancialHistory objects. I populate the objects and display them in a table of textboxes within a form in the view using default binding (This works correctly). The user can then submit the form to refresh the FinancialHistory objects from a different datasource, replacing what was previously in the list with the new results. When the new results are returned, I can see that the model contains the expected new values, but when the HTML is rendered, the original amounts still appear. If the new results contains more objects than the original list (as shown in the example code), the added rows do appear with the correct values. So, if the original had 2 objects and the refreshed list has 3, the resulting HTML shows the first 2 rows with the old values and a 3rd row with the new values.
Here are the models:
public class ReportModel
{
public string AccountNumber { get; set; }
public IList<FinancialHistory> FinancialHistories { get; set; }
}
public class FinancialHistory
{
public FinancialHistory()
{
Id = Guid.Empty;
}
public Guid Id { get; set; }
public DateTime TransactionDate { get; set; }
public decimal TotalAmount { get; set; }
}
In the Home/Index view, I use HTML.TextBoxFor() to bind the properties of each FianancialHistory object in the list to textboxes in a table. Here is the Index view:
#model SimpleExample.Models.ReportModel
<form id="FormSave" method="post" name="FormSave" action="/Home/Refresh">
#Html.LabelFor(model => model.AccountNumber) #Html.TextBoxFor(model => model.AccountNumber)
<table class="table" style="width: 95%">
<tr>
<td >Date</td>
<td >Amount</td>
</tr>
#{
if (Model.FinancialHistories != null)
{
for (int index = 0; index <= Model.FinancialHistories.Count - 1; index++)
{
<tr>
<td>#Html.TextBoxFor(model => model.FinancialHistories [index].TransactionDate, "{0:MM/dd/yyyy}", new { #readonly = "true" })</td>
<td>#Html.TextBoxFor(model => model.FinancialHistories[index].TotalAmount, "{0:#,#.00}", new { #readonly = "true" })</td>
<td>#Html.HiddenFor(model => model.FinancialHistories[index].Id)</td>
</tr>
}
}
}
</table>
<input type="submit" id="submit" value="Refresh" class="submit" />
</form>
For this example, my action methods in the controller are very simple. Initially, the Index method populates the list with 2 FinancialHistory Objects. The Refresh method replaces the original 2 objects with 3 new objects, with different amounts.
public class HomeController : Controller
{
public ActionResult Index()
{
ReportModel reportModel = new ReportModel();
reportModel.AccountNumber = "123456789";
IList<FinancialHistory> financialHistories = new List<FinancialHistory>();
financialHistories.Add(new FinancialHistory
{
Id = Guid.NewGuid(),
TransactionDate = DateTime.Parse("3/1/2010"),
TotalAmount = 1000.00M
});
financialHistories.Add(new FinancialHistory
{
Id = Guid.NewGuid(),
TransactionDate = DateTime.Parse("4/1/2011"),
TotalAmount = 2000.00M
});
reportModel.FinancialHistories = financialHistories;
return View(reportModel);
}
public ActionResult Refresh(ReportModel reportModel)
{
FinancialHistoryRepository financialHistoryRepository = new FinancialHistoryRepository();
IList<FinancialHistory> financialHistories = new List<FinancialHistory>();
financialHistories.Add(new FinancialHistory
{
Id = Guid.Empty,
TransactionDate = DateTime.Parse("3/1/2010"),
TotalAmount = 1111.11M
});
financialHistories.Add(new FinancialHistory
{
Id = Guid.Empty,
TransactionDate = DateTime.Parse("4/1/2011"),
TotalAmount = 2222.22M
});
financialHistories.Add(new FinancialHistory
{
Id = Guid.Empty,
TransactionDate = DateTime.Parse("5/1/2012"),
TotalAmount = 3333.33M
});
reportModel.FinancialHistories = financialHistories;
return View("Index",reportModel);
}
}
That's how HTML helpers work and is by design. When rendering they are first looking in the ModelState for values and after that in the model. You are modifying the values of your model in the POST controller action, but the ModelState values still contain the old values which will be used. If you want to modify values of your model in a POST action you should remove the original values from the ModelState if you intend to redisplay the same view:
public ActionResult Refresh(ReportModel reportModel)
{
// clear the original posted values so that they don't get picked up
// by the helpers
ModelState.Clear();
FinancialHistoryRepository financialHistoryRepository = new FinancialHistoryRepository();
...
return View("Index",reportModel);
}