How to send Model value as parameter while submitting #Ajax.Beginform() - ajax

I am using #Ajax.Beginform in my View which is tightly bound to the ViewModel.
I've #Html.ListBoxFor inside my form. I add and delete items from the listbox using jQuery. Now what I am want to achieve is that onpress of the submit button, it should send full data present in the listbox regardless of which are selected. Currently it sends the list to controller if I select all the item in the listbox and press submit button. But I don't want to do that. Any idea as to how to achieve this?
Can it be sent as a form parameter.
#using (Ajax.BeginForm("SaveTextComponent", "LoanFilterEditor", new{ param1 = Model.listBoxItem}, new AjaxOptions { HttpMethod = "POST", OnSuccess = "SUCCESS" }))
I try to accept the parameter in the controller like this
public ActionResult SaveTextComponent(TextComponentViewModel model, List<SelectListItem> list)
{
}
But list is null.. Please help.

Maybe you can use this javascript to select all items at your listbox and then, send it to controller:
function listbox_selectall(listID, isSelect) {
var listbox = document.getElementById(listID);
for(var count=0; count < listbox.options.length; count++) {
listbox.options[count].selected = isSelect;
}
}
And after that, you can call the function on your form in this way:
<script>
function submit() {
listbox_selectall('righthand_side_listbox_id', true);
return true;
}
</script>
<form onsubmit="return submit()">
...
</form>
Credits to Viral Patel blog

You can follow my example:
Model:
pulic class TextComponentViewModel {
public int[] SelectedListItem { get; set; }
public List<Item> ListItem { get; set; }
}
public class Item {
public int Id { get; set; }
public String Name { get; set; }
}
View:
#model TextComponentViewModel
#using (Ajax.BeginForm("SaveTextComponent", "LoanFilterEditor", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "SUCCESS" }, new {name = "mainForm", id = "mainForm"}))
{
#Html.ListBoxFor(model => model.SelectedListItem , new MultiSelectList(Model.ListItem, "ID", "Name"))
for(var i = 0; i < Model.ListItem.Count();i++ )
{
#Html.HiddenFor(m => m.ListItem[i].Id)
#Html.HiddenFor(m => m.ListItem[i].Name)
}
<input type = "submit" id="submitButton" />
}
Controller:
public ActionResult SaveTextComponent(TextComponentViewModel model)
{
}
Script:
$("#submitButton").click(function(){
$("#mainForm").submit();
});

Related

Get a boolean value from database to checkbox with option to update in .NET MVC using AJAX

I need to do the following table with .NET MVC and AJAX:
The idea is a list with users with the option to lock each of them (i am using the standard identity model):
Email | Username | LockoutEnabled
user1#domain.com | User1 | [x]
user2#domain.com | User2 | [0]
user3#domain.com | User3 | [0]
For the moment I successfully update the current status in the view from the db to the checkbox using this approach
<td>
#Html.EditorFor(modelItem => user.LockoutEnabled)
</td>
What i want to do next is:
1. Update the db on the current checkbox status without reloading the page
2. Show a notification on successful DB update from the view (no reload)
This is the controller returning the status
[Authorize(Roles = "Admin")]
public ActionResult LockUser(string id, bool status)
{
PFMDbContext db = new PFMDbContext();
db.Users.FirstOrDefault(user => user.Id == id).LockoutEnabled = status;
db.SaveChanges();
return new HttpStatusCodeResult(HttpStatusCode.OK);
}
This is a simple job using Ajax.
Create a ViewModel that will be passed to the view.
public class ApplicationUserViewModel
{
public string Id { get; set; }
public string Name { get; set; }
public bool IsLocked { get; set; }
}
The controller methods.
[HttpGet]
public ActionResult LockUsers()
{
var db = new PFMDbContext();
var model = db.Users
.Select(p => new ApplicationUserViewModel
{
Id = p.Id,
Name = p.Name, // Or whatever properties you have
IsLocked = p.LockoutEnabled
}).ToList();
}
[HttpPost]
public ActionResult LockUser(string id, bool isLocked)
{
var db = new PFMDbContext();
try
{
var user = db.Users.FirstOrDefault(user => user.Id == id);
user.LockoutEnabled = isLocked;
db.SaveChanges();
return Json(true);
}
catch
{
return Json(false);
}
}
In your view
#model List<ApplicationUserViewModel>
<!-- This is just an example. Use your own template. -->
#foreach (var user in Model)
{
<div>
<p>#user.Name</p>
<input id="#user.Id" type="checkbox" data-userid="#user.Id" class="js-islocked" value="#user.IsLocked" />
</div>
}
Then using javascript you can bind the select event.
$(document).ready(function () {
$(this).on('change', 'js-islocked', function () {
var userId = $(this).data('userid');
var isLocked = $(this).prop('checked');
// Use ajax to save the modification
$.ajax({
type: 'POST',
url: '/Users/LockUser',
data:{ id: userId, isLocked: isLocked },
contentType: 'application/json',
success:function(data) {
// Update a div or show a message
}
})
});
});

Like button in MVC using 'Ajax.Beginform()' not able to display total likes on page

I am beginner in MVC and Ajax development and want a like button in my web, which should work like this: if the user clicks on it total likes will be incremented by 1 and if the user clicks it again (dislike) then it will decremented by 1. What I have done so far is this:
Here's the Model:
public class Like
{
public int Id { get; set; }
public virtual Video Video { get; set; }
public int VideoID { get; set; }
public string UserId { get; set; }
public virtual ApplicationUser ApplicationUser { get; set; }
}
Here is the Controller:
Post Method
[HttpPost]
public ActionResult Like(int Id, Like like)
{
if (ModelState.IsValid && User.Identity.IsAuthenticated == true)
{
like.Video = storeDB.Videos.Find(Id);
like.UserId = User.Identity.GetUserId();
var userlike = storeDB.Likes.Where(l => l.UserId == like.UserId && l.VideoID == Id);
if (userlike.Count() == 0)
{
storeDB.Likes.Add(like);
storeDB.SaveChanges();
}
else if (userlike.Count() == 1)
{
var likeDel = storeDB.Likes.FirstOrDefault(l => l.UserId == like.UserId && l.VideoID == Id);
storeDB.Likes.Remove(likeDel);
storeDB.SaveChanges();
}
List<Like> videoLikes = storeDB.Likes.Where(v => v.VideoID == Id).ToList();
int nooflikes = videoLikes.Count();
ViewBag.noLikes = nooflikes;
return Json(ViewBag.noLikes, JsonRequestBehavior.AllowGet);
}
else
{
ViewBag.Message = "Login to like this video";
return PartialView("Like", ViewBag.noLikes);
}
This is the Get method of Like:
public ActionResult Like(int id)
{
List<Like> videoLikes = storeDB.Likes.Where(v => v.VideoID == id).ToList();
int nooflikes = videoLikes.Count();
ViewBag.noLikes = nooflikes;
return Json(ViewBag.noLikes, JsonRequestBehavior.AllowGet);
}
and I have created a Partial View for this:
#if (ViewBag.Message != null)
{
<script>
$(document).ready(function () {
alert('#ViewBag.Message');
});
</script>
}
//to display total likes
<input type="text" id="likes" name="likes" value='#ViewBag.noLikes' readonly="readonly" style="border:none; background-color:transparent; width:20px" /><span style="color:black">likes</span>
and this is the main view in which I am using Ajax.BeginForm()
#using (Ajax.BeginForm("Like", "VOD", new { Id = Model.Id },
new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "likecount"
}))
{
<button type="submit" id="like" value="Like" class=" btn btn-primary btn-xs"> Like <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> </button>
}
<span id="likecount">
#Html.Partial("Like", new Models.Like())
</span>
Now the issue is that when the page is first loaded it is not displaying total likes, and when I click on like button it returns 1 and when I click like button again it returns 0 but when I refresh the page or when I post back to another page total likes again disappear.
Can anybody help me?
Instead of doing so much code you can do above functionality in simple way.
You will required following to do so,
2 Action Methods,
1. Increment Like Count.
2. Decrease Like Count.
2 Buttons on web page
1. Like Button (Initially visible)
2. DisLike Button (Initially Invisible)
you can create a ajax request on both buttons something like bellow,
$("#btnLike").click(function () {
$.ajax({
type: "POST",
url: "Controller/LikeAction",
data: { /* Your Data */ };
success: function (result) {
// Hide Like Button & Show Dislike Button
},
error: function (error) {
alert("error = " + error);
}
});
});
Same way you can create ajax request for dislike button also. You just need to hide and show buttons.

Ajax paged list pass object to controller

I am working on some advanced searching functionality and I have run into a roadblock. I would like to use AJAX for my search results and use the PagedList additons to handle paging. I have an AdvancedSearchResults action which takes a search filters class and the current page. The issue is how can I pass the search Filters class into this action correctly. I am sure something I am doing just isnt organized correctly as I would think this would be fairly common. I would really appreciate any help. Thanks in advance.
Controller Action:
public ActionResult AdvancedSearchResults(AdvancedSearchFilters searchFilters, int ? page)
{
//DO STUFF
return PartialView("_SearchResults", results);
}
AdvancedSearchResults Filters:
public class AdvancedSearchFilters
{
public string SearchText { get; set; }
public List<string> SelectedTableTypes { get; set; }
public List<Guid> SelectedGenreIds { get; set; }
public List<Guid> SelectedPlatformIds { get; set; }
public int YearMax { get; set; }
public int YearMin { get; set; }
public int RatingMin { get; set; }
public int RatingMax { get; set; }
}
Search Results Partial View:
#model List<SearchResultItem>
#using PagedList
#using PagedList.Mvc
<!-- 15 Per Page -->
<h2>Search Results</h2>
#if (ViewBag.OnePageOfSearchItems.Count > 0)
{
<div class="pagination">
#Html.PagedListPager((IPagedList)ViewBag.OnePageOfSearchItems, page => Url.Action("AdvancedSearchResults", "Search", new { searchFilters = ViewBag.AdvancedSearchFilters, page = page }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.OnlyShowFivePagesAtATime, "#main-results"))
</div>
foreach (var searchResultItem in Model)
{
<a href="#Url.Action(searchResultItem.ResultType, searchResultItem.ResultType, new { id = searchResultItem.ResultId })" class="result">
#if (searchResultItem.ProfileImageLocation != null)
{
<img src="#searchResultItem.ProfileImageLocation" alt="#searchResultItem.ResultName" />
}
<div class="result-info">
<h3>#searchResultItem.ResultName</h3>
<p>#searchResultItem.DisplayText</p>
</div>
</a>
}
<div class="pagination">
#Html.PagedListPager((IPagedList)ViewBag.OnePageOfSearchItems, page => Url.Action("AdvancedSearchResults", "Search", new { searchFilters = ViewBag.AdvancedSearchFilters , page = page }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.OnlyShowFivePagesAtATime, "#main-results"))
</div>
}
else
{
<span>No Matches.</span>
}
Try passing the data to action method in the form of json. Try the below code which pass the json object to action method.
//// construct your json object.
var jsonObj = '{"SelectedTableTypes" : [{"1","2"}]}';
var postData = $.parseJSON(jsonObj);
$.ajax(
{
url: // your URL with Action name AdvancedSearchResults,
data: postData,
cache: false,
dataType: "json",
success: function (result) {
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});

Cascading Dropdown in Mvc3

I am using Mvc3 I have 2 dropdown,BankBranch and city.
On first time load of view i am binding both the dropdon without cascading. then if user select city i want to change bankbranch according to that.
I am confused how i can achieve both the things together.
Thanks in advance.
This blog post should get you on your way. It provides examples for normal form posts, microsoft ajax form post, jquery ajax and others.
http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-and-the-context.aspx
EDIT:
Generalized Code Explanation
Model
public class CascadeModel {
public SelectList<City> Cities { get; set; }
public SelectList<BankBranch> BankBranches { get; set;}
public int CityId { get; set; }
public int BranchId { get; set; }
}
public class Branch {
public int Id { get; set;}
public string Name { get; set; }
}
Controller:
public ActionResult BranchSelector() {
var viewData = new CascadeModel();
viewData.Cities = new SelectList(Repository.GetAllCities(), "Id", "Name", selectedCity);
viewData.BankBranches = new SelectList(Repository.GetBranchesByCity(selectedCity), "Id", "Name", "");
return View(viewData);
}
public JsonResult GetBranches(int id) {
return Json(Repository.GetBranchesByCity(id), JsonRequestBehavior.AllowGet);
}
View:
#model CascadeModel
#Html.DropDownListFor(m => m.CityId, Model.Cities, new { style = "width:250px" })
<br />
#Html.DropDownListFor(m => m.BranchId, Model.BankBranches, new { style = "width:250px" })
<script type="text/javascript">
$(document).ready(function() {
$("#CityId").bind('change', function() {
$.ajax({
url: '/Controller/GetBranches/' + $(this).val(),
success: function(data) {
//Clear the current branch ddl
//Load the new Branch data returned from the jquery call in the branches ddl
}
});
};
});
</script>

Master-Detail Sample Code for MVC 3 Razor (using Ajax for details)

I am looking for sample code to create a master/details with c# mvc 3.
Specifically, I am trying to figure out how to call via ajax the rendering of a partial view. I am able to put the partial view on the form but want to populate it after a user has selected an item from a select list via ajax.
thx
As always you start with the model:
public class MyViewModel
{
public int Id { get; set; }
public string Title { get; set; }
}
public class DetailsViewModel
{
public string Foo { get; set; }
public string Bar { get; set; }
}
then a controller:
public class HomeController : Controller
{
public ActionResult Index()
{
// TODO: don't hardcode, fetch from repository
var model = Enumerable.Range(1, 10).Select(x => new MyViewModel
{
Id = x,
Title = "item " + x
});
return View(model);
}
public ActionResult Details(int id)
{
// TODO: don't hardcode, fetch from repository
var model = new DetailsViewModel
{
Foo = "foo detail " + id,
Bar = "bar detail " + id
};
return PartialView(model);
}
}
and corresponding views.
~/Views/Home/Index.cshtml:
#model IEnumerable<MyViewModel>
<ul>
#Html.DisplayForModel()
</ul>
<div id="details"></div>
<script type="text/javascript">
$(function () {
$('.detailsLink').click(function () {
$('#details').load(this.href);
return false;
});
});
</script>
~/Views/Home/Details.cshtml:
#model DetailsViewModel
#Model.Foo
#Model.Bar
~/Views/Home/DisplayTemplates/MyViewModel.cshtml:
#model MyViewModel
<li>
#Html.ActionLink(Model.Title, "details", new { id = Model.Id }, new { #class = "detailsLink" })
</li>
I have blogged about creating master detail form using asp.net mvc where you can add n child records on clietn side without the need of sending ajax request just to bring the editor fields for child records. it used jquery templates

Resources