ASP.NET How to set Attributes at client side? - asp.net

I'm trying to set some data at client side before I send it to server, but it give me no changes
The div contains data:
<div id="chanelValues" data-value="0" runat="server"></div>
The Checkbox which will give chanelValues div it's values
<input type="checkbox" onclick="dropdownClick(1, 'chanelValues')" />
dropdownClick func set chanelValues data-value to 1 success by js
But Server side give me chanelValues = 0
string chanelValues = this.chanelValues.Attributes["data-value"];
How Can I get updated data?
Thanks!

Maybe i get your question wrong but i will try...
You need a model as Interface between Server and Client
using System;
namespace MvcMovie.Models
{
public class Movie
{
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
}
}
https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/adding-a-model
#model MvcMovie.Models.Movie
#{
ViewBag.Title = "Details";
}
<h2>Details</h2>
<div>
<h4>Movie</h4>
<hr />
<dl class="dl-horizontal">
<dt>
#Html.DisplayNameFor(model => model.Title)
</dt>
#*Markup omitted for clarity.*#
</dl>
</div>
<p>
#Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
#Html.ActionLink("Back to List", "Index")
</p>
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model

You may take a look at the Update TargetID property
Controller:
public ActionResult SomeAction()
{
// you could return a PartialView here if you need more complex HTML fragment
return Content("<span>some content</span>", "text/html");
}
View:
<div id="result"></div>
<%= Ajax.ActionLink(
"Update div test",
"SomeAction",
new AjaxOptions { UpdateTargetId = "result" }
) %>

Related

Validation in MVC 5 .net

Im try to give alert if there is a error in form in my form there are some text fields validation like below
<div class="form-group">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xm-12">
<label class="control-label form-text-align text-top-padding ">
#Resources.StandardPrice
</label>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xm-12 text-top-padding">
#Html.TextBoxFor(model => model.products.BasicPrice, new { #class = "form-control errorClass", #id = "basicPrice", #placeholder = #Resources.StandardPrice, #onblur = "addClass(this)", #maxlength = Resources.AddNewProductFieldMaxLength })
#Html.ValidationMessageFor(model => model.products.BasicPrice, null, new { #class = "help-inline" })
</div>
</div>
</div>
if there is some error in form how can I give a alert
In order to display the error message and prevent the submission of your form you have to add controls on your model (or ViewModel).
For example if you want that field to be required so that the form will not be submitted only if the user give a value to that field you have to add the [Required] to your product's model attribute "BasicPrice" as follow :
public class products {
public int ID { get; set; }
[Required]
public string Name { get; set; }
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
[Required]
public string Genre { get; set; }
[Range(1, 100)]
[DataType(DataType.Currency)]
public decimal Price { get; set; }
[StringLength(5)]
public string Rating { get; set; }
}
Here's a link to the Microsoft official Documentation which explain the subject and give more details :
https://learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions/getting-started-with-aspnet-mvc4/adding-validation-to-the-model
If you already did what #Mohamed Kamel Bouzekria suggested and still not working.
it's possible that you missing something in your controller which could this
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult YOurMethod( Model model)
{
if (ModelState.IsValid)//if there is no errors and valid values
{
//do something
db.SaveChanges();
return RedirectToAction("Index");
}
return View();//else return the same view that should display the errors
}
if it still not working then you missing something else in your view.if so post the full code of the view

asp net mvc3 post a list of objects to action

I created a page with aspnet mvc3. It show all users info as a list. I want to do something with this list. There are some checkboxes that belong to each items. When I click some checkboxes and press submit button, I want to post the whole list as a collection and save each items of this collection to database. There are several notes on internet but there is no exact solution. I have a UserDto. and want to use this to transfer users data in all sections.
Does anyone have any full solution about this or can they give any idea?
Thanks in advance.
Kerem
I added some of my codes. You can see the lead sentences what they are about.
this is my index view detail:
#model List<DomainModel.UserApprovalDto>
#{
ViewBag.Title = "Manage Users";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Manage Users</h2>
<div>#Html.Partial("_PartialManageUsers", (List<DomainModel.UserApprovalDto>)Model) </div>
this is my partial view detail:
#model List<DomainModel.UserApprovalDto>
#using (Html.BeginForm("ConfirmUsers", "ManageUsers", FormMethod.Post))
{
<table>
<tr>
<th>
Name
</th>
<th>
Is Reported
</th>
</tr>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>
#Html.DisplayFor(modelItem => Model[i].FirstName)
</td>
<td>
#Html.CheckBox("IsReported", Model[i].IsReported.HasValue ? Model[i].IsReported.Value : false)
#*#Html.CheckBoxFor(modelItem => Model[i].IsReported.Value);*# #* #if (Model[i].IsReported != null)
{
#Html.CheckBoxFor(modelItem => Model[i].IsReported.Value);
}
else
{
#Html.CheckBoxFor(modelItem => Model[i].IsReported.Value);
}*#
</td>
<td>
</td>
</tr>
}
</table>
<div>
<input name="submitUsers" type="submit" value="Save" />
</div>
}
this is my controller submit method
[HttpPost]
public ActionResult ConfirmUsers(List<DomainModel.UserApprovalDto> collection)
{
if (ModelState.IsValid)
{
//TO-DO
}
return RedirectToAction("Index");
}
this last one is my DTO class detail:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace DomainModel
{
public class UserApprovalDto
{
public long UserId { get; set; }
public Guid CarUserId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string PhotoPath { get; set; }
public string PhotoSmallPath { get; set; }
public string PhotoSquarePath { get; set; }
public string PhotoBigPath { get; set; }
public bool IsBlocked { get; set; }
public bool IsDeleted { get; set; }
}
}
when I submit this code my list return null collection to my controller method.
thanks for your comments.
Assuming you are creating a screen which adds/ remove users to a course. So let's create some viewmodels
public class CourseVM
{
public string Name { set;get;}
public int CourseID { set;get;}
public List<UserVM> Users { set;get;}
public CourseVM()
{
Users=new List<UserVM>();
}
}
public class UserVM
{
public string Name { set;get;}
public int UserID{ set;get;}
public bool IsSelected { set;get;}
}
Now in your GET Action, you will fill the values of the ViewModel and sent it to the view.
public ActionResult Add()
{
var vm = new CourseVM();
//The below code is hardcoded for demo. you may replace with DB data.
vm.Users.Add(new UseVM { Name = "Jon" , UserID=1});
vm.Users.Add(new UseVM { Name = "Scott", UserID=2 });
return View(vm);
}
Now Let's create an EditorTemplate. Go to Views/YourControllerName and Crete a Folder called "EditorTemplates" and Create a new View there with the same name as of the Property Name(UserVM.cshtml)
Add this code to your new editor template.
#model ChannelViewModel
<p>
<b>#Model.Name</b> :
#Html.CheckBoxFor(x => x.IsSelected) <br />
#Html.HiddenFor(x=>x.Id)
</p>
Now in your Main View, Call your Editor template using the EditorFor Html Helper method.
#model CourseVM
#using (Html.BeginForm())
{
<div>
#Html.EditorFor(m=>m.Users)
</div>
<input type="submit" value="Submit" />
}
Now when you post the form, Your Model will have the Users Collection where the Selected Checkboxes will be having a True value for the IsSelected Property.
[HttpPost]
public ActionResult Add(CourseVM model)
{
if(ModelState.IsValid)
{
//Check for model.Users collection and Each items
// IsSelected property value.
//Save and Redirect(PRG pattern)
}
return View(model);
}

Asp.net mvc save One-to-many and passing master on submit

I have a problem saving the detail of a master in asp.net mvc.
For reference I am using nhibernate.
I have a One-to-many relationship between the Store and Employee entities.
I save the master and the detail in 2 steps.
You create the Store first, save it, then you create the employees.
Here are both classes:
public class Store
{
public Store()
{
Employees = new List<Employee>();
}
public virtual int Id { get; set; }
public virtual string Name { get; set; }
public virtual IList<Employee> Employees { get; set; }
}
public class Employee
{
public virtual int Id { get; set; }
public virtual string Name { get; set; }
public virtual Store Store { get; set; }
}
So to create the Store I have the following code in the store's controller and view:
public virtual ActionResult Create()
{
var model = new StoreModel();
return View(model);
}
[HttpPost]
public ActionResult Create(StoreModel model)
{
if (ModelState.IsValid)
{
Store entity = new Store(model);
Repository<Store> repository = new Repository<Store>();
repository.Create(entity);
return RedirectToAction("Index");
}
return View(model);
}
#model StoreModel
#{
ViewBag.Title = "Create store";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Create store
</h2>
#Html.ValidationSummary(true)
#using (Html.BeginForm())
{
<div>
#Html.LabelFor(store => store.Name)
</div>
<div>
#Html.TextBoxFor(store => store.Name)
#Html.ValidationMessageFor(store => store.Name)
</div>
<p>
<input type="submit" value="Create"/>
</p>
}
<div>
#Html.ActionLink("Back", "Index")
</div>
That works fine, but my problem is when i try to save the employees, the store is always null.
So to create the employees I have the following code in the employee's controller and view:
public virtual ActionResult Create(int storeId)
{
var model = new EmployeeModel();
Repository<Store> repository = new Repository<Store>();
model.Store = repository.Read(storeId);
return View(model);
}
[HttpPost]
public ActionResult Create(EmployeeModel model) //Problem here, store is null in the model
{
if (ModelState.IsValid)
{
Employee entity = new Employee(model);
Repository<Employee> repository = new Repository<Employee>();
repository.Create(entity);
return RedirectToAction("Index");
}
return View(model);
}
#model EmployeeModel
#{
ViewBag.Title = "Create employee";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Create employee
</h2>
#Html.ValidationSummary(true)
#using (Html.BeginForm())
{
<div>
#Html.LabelFor(employee => employee.Name)
</div>
<div>
#Html.TextBoxFor(employee => employee.Name)
#Html.ValidationMessageFor(employee => employee.Name)
</div>
<p>
<input type="submit" value="Create"/>
</p>
}
<div>
#Html.ActionLink("Back", "Index")
</div>
What am I doing wrong?
You're not setting the employee's store property anywhere.
You're not passing the storeId anywhere. I suggest you create a dropdown in your 'Create Employee' form and populate it with your list of stores.
I was able to fix my problem by adding int storeId in the httppost create and read the store from the database and setting the emplyee's store.
[HttpPost]
public ActionResult Create(EmployeeModel model, int storeId) //Problem here, store is null in the model
{
if (ModelState.IsValid)
{
Repository<Store> storeRepository = new Repository<Store>();
Store store = storeRepository.Read(storeId);
Employee employee = new Employee(model);
employee.Store = store;
Repository<Employee> employeeRepository = new Repository<Employee>();
employeeRepository.Create(employee);
return RedirectToAction("Index");
}
return View(model);
}
and using a hidden field:
#model EmployeeModel
#{
ViewBag.Title = "Create employee";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Create employee
</h2>
#Html.ValidationSummary(true)
#using (Html.BeginForm())
{
#Html.Hidden("storeId", Model.Store.Id)
<div>
#Html.LabelFor(employee => employee.Name)
</div>
<div>
#Html.TextBoxFor(employee => employee.Name)
#Html.ValidationMessageFor(employee => employee.Name)
</div>
<p>
<input type="submit" value="Create"/>
</p>
}
<div>
#Html.ActionLink("Back", "Index")
</div>

Asp.net MVC 3 "parameter conversion from type 'System.String' to type failed" when using SelectList Dropdown box

I'm stuck and after looking this up for hours, I think I need more eyeballs.
The situation is the following:
It's an Asp.Net MVC3 with Entity Framework 4 project. And I have two classes. One ConfigurationFile and another one Action. There is a one-to-many relationship between the two. Here is a simplified view on the code:
public class ConfigurationFile
{
[Key, Required]
[Column(TypeName = "uniqueidentifier")]
public Guid Id { get; set; }
[Required]
public string Name { get; set; }
[Column(TypeName = "uniqueidentifier")]
[Required]
public Guid ActionId { get; set; }
public virtual Models.Action Action { get; set; }
}
public class Action
{
[Key, Required]
[Column(TypeName = "uniqueidentifier")]
public Guid Id { get; set; }
[Required]
public string ActionValue { get; set; }
}
Then I want to create a new ConfigurationFile, and are my two controller methods (and at this point, this is 95% Visual Studio 10 generated code):
// db is my context class.
//
// GET: /Configuration/Create
public ActionResult Create()
{
ViewBag.ActionId = new SelectList(db.Actions, "Id", "ActionValue");
return View();
}
//
// POST: /Configuration/Create
[HttpPost]
public ActionResult Create(Models.ConfigurationFile configurationfile)
{
if (ModelState.IsValid)
{
configurationfile.Id = Guid.NewGuid();
db.ConfigurationFiles.Add(configurationfile);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.ActionId = new SelectList(db.Actions, "Id", "ActionValue", configurationfile.ActionId);
return View(configurationfile);
}
And here is a snippet of my Create view:
#model MyProject.Areas.ConfigurationFile.Models.ConfigurationFile
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Configuration File</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ActionId, "Action")
</div>
<div class="editor-field">
#Html.DropDownList("ActionId", String.Empty)
#Html.ValidationMessageFor(model => model.ActionId)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
When I open the Create page, I can clearly see that my dropdown for the Action class is fine (correct value -- the Action.Id -- and text -- Action.ActionValue -- ) but when I submit the form, I have the following error: "The parameter conversion from type 'System.String' to type 'MyProject.Models.Action' failed because no type converter can convert between these types."
Help please !!
Right now MVC has no way of connecting your dropdownlist from your view to the ActionId of your ConfigurationFile object.
I would try replacing this line:
#Html.DropDownList("ActionId", String.Empty)
for this
#Html.DropDownListFor(model => model.ActionId, ViewBag.ActionId)
Other than that, I can't think of what else you might have done wrong.
I hope that helps!
This is how I did to circumvent the problem. I just changed my controller this way:
Models.Action act = db.Actions.Find(configurationfile.ActionId);
ModelState.Clear();
configurationfile.Action = act;
TryValidateModel(configurationfile);
And after that, the validation was Ok. A bit hacky (and another possible hit on the DB), but at least, I can keep going.

ASP.NET MVC3: Interaction between Partial View and Main View

I have a partial view for contact. Currently the index view shows this partial view for contact details. There is a save button inside the partial view to save the edited data. There is a validation for age while saving the edited data. This much is working fine.
Whenever user edit age and save it, I need to show the corresponding horoscope prediction on the main view. How do we achieve it?
public class ContactEntity
{
public int ContactID { get; set; }
public string ContactName { get; set; }
[Range(18, 50, ErrorMessage = "Must be between 18 and 50")]
public int ContactAge { get; set; }
}
public class AgeHoroscope
{
public int Age { get; set; }
public string HoroscopePrediction { get; set; }
}
//Home Controller
namespace MYContactEditPartialViewTEST.Controllers
{
public class HomeController : Controller
{
List<AgeHoroscope> horoList = new List<AgeHoroscope>()
{
new AgeHoroscope{Age=16,HoroscopePrediction="You are confused"},
new AgeHoroscope{Age=26,HoroscopePrediction="You are very brilliant"},
new AgeHoroscope{Age=27,HoroscopePrediction="You are practical"}
};
public ActionResult Index()
{
AgeHoroscope selectedHoro = horoList[1];
return View(selectedHoro);
}
}
}
//Contact Controller
namespace MYContactEditPartialViewTEST.Controllers
{
public class ContactController : Controller
{
public PartialViewResult MyContactDetailEdit()
{
Thread.Sleep(500);
return PartialView(GetContact());
}
[HttpPost]
public PartialViewResult MyContactDetailEdit(string conatcclick)
{
//Save to database
Thread.Sleep(500);
return PartialView(GetContact());
}
private ContactEntity GetContact()
{
ContactEntity contactEntity = new ContactEntity();
contactEntity.ContactID = 1;
contactEntity.ContactName = "Lijo";
contactEntity.ContactAge = 26;
return contactEntity;
}
}
}
//Index.cshtml
#model MYContactEditPartialViewTEST.AgeHoroscope
#{
ViewBag.Title = "Index";
}
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<h2>
Index</h2>
<div>
<a>Your age is <b>#Html.DisplayFor(x => x.Age) </b>and the prediction is <b>" #Html.DisplayFor(x => x.HoroscopePrediction)
" </b></a>
<br />
</div>
<div style="border: 3px solid Teal">
#Html.Action("MyContactDetailEdit", "contact")
</div>
// MyContactDetailEdit.cshtml
#model MYContactEditPartialViewTEST.ContactEntity
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<h3>MyContactDetailEdit PARTIAL</h3>
<div>
#Html.HiddenFor(x => x.ContactID)
<br />
<div style="font-weight:bold">
Name:
<br />
</div>
#Html.DisplayFor(x => x.ContactName)
<br />
<br />
<div style="font-weight:bold">
Age
<br />
</div>
#Html.EditorFor(x => x.ContactAge)
#Html.ValidationMessageFor(model => model.ContactAge)
<br />
<br />
</div>
<input type="submit" id="saveButton" value="Save" />
}
READING
ASP.Net MVC Passing multiple parameters to a view
ASP.Net MVC 3 RC2, Partial Views Form Handling
I would like just use jQuery to do ajax post and then change the parent view client side directly
you'll need to create a new ViewModel to do this. This ViewModel (IndexViewModel.cs) would look something like this (I'm guessing at this):
public class IndexViewModel
{
public int ContactID { get; set; }
public string ContactName { get; set; }
public int ContactAge { get; set; }
public string HoroscopePrediction { get; set; }
}
you'd then use it in your controller index action (and view):
#model MYContactEditPartialViewTEST.IndexViewModel
the idea being that you'd populate the HoroscopePrediction in a join between ContactEntity and AgeHoroscope (or via Linq etc) and thus show each line in the index as a complete object (showing contact and horoscope).
As data is posted to "HomeController" and "Index" action, so changes are reflected when you change age in View.
Try to modify the home controller as follows,then it will work as expected.
1) Instead of having a list of AgeHoroscope, we can have a dictionary of age and prediction.
2) Create two Index Action for HttpGet and HttpPost as follows.
public class HomeController : Controller
{
Dictionary<int, string> AgePred = new Dictionary<int, string>()
{
{16,"You are confused"},
{26,"You are very brilliant"},
{27,"You are practical"}
};
[HttpGet]
public ActionResult Index()
{
AgeHoroscope selectedHoro = new AgeHoroscope() { Age = 26 };
selectedHoro.HoroscopePrediction = AgePred[selectedHoro.Age];
return View(selectedHoro);
}
[HttpPost]
public ActionResult Index(AgeHoroscope model,ContactEntity entity)
{
model.Age = entity.ContactAge;
model.HoroscopePrediction = AgePred[entity.ContactAge];
return View(model);
}
}

Resources