I have A button of BtnNext() that when click will Dequeue the items the I Enqueue. I use Tempdata so that I can use the Dequeued data and render it on my view.
Here is the controller:
public ActionResult BtnNext()
{
var first = MyQueue.todayQueue.Dequeue();
MyQueue.todayQueue.Count();
TempData["QueueItem"] = first;
return View();
}
Here is my view:
#Html.ActionLink(" ", "BtnNext", null, new { #class = #cssClass, #id = "Link1" })
I expect this button to behave like this.
When I click this button it will refresh the page and render the Dequeued data in the same view just change A portion of my view with the dequeued property
Right now what this code is doing when I click the BtnNext() the error is its trying to find A view with url like this http://localhost:50000/TellerScreens/BtnNext but I don't want it to go to another page, I just want to update a portion of the Index so the url must stay
http://localhost:50000/TellerScreens
Related
I am developing my first application using Asp.Net MVC5. In my application I have single view,In which I am going to call two action. One action by using button and another by actionlink. When I call it using button it works perfectly for validation messages.
In other hand , If I click on 'Add Another'(which is action link) I want same validation, But It does not showing any validation messages. I have implemented below code for #Html.ActionLink() click event.
In Razor View -
#Html.ActionLink("Add Another", "AddNew", "AgreementRegistration", new { #class = "postLink" })
In Controller -
[HttpPost]
public ActionResult AddNew(User_Master usermaster, Commercial_Master commercialmaster, Property_Master propertymaster, PropertyCommercial_Master propertycommercialmaster, PropertyDetails_Master propertydetailsmaster, SecurityDeposit_Master securitydepositmaster, PropertyUser_Master propertyusermaster, UserType_Master usertypemaster)
{
agreementnew = new AgreementNew(usermaster, commercialmaster, propertymaster, propertycommercialmaster, propertydetailsmaster, securitydepositmaster, propertyusermaster, usertypemaster);
if (ModelState.IsValid)
{
//Some Logic
return View("InitialView", agreementnew);
}
else
{
//Some Logic
return View("InitialView", agreementnew);
}
}
When I checked it using debugger then it comes to above method in else block but does not showing any validation message. I want to display all the validation message when I click on ActionLink. How do I solve this problem?
by clicking on action link it doesn't submit your form. Validation is only checked when your form is submitted. So use Javascript to submit your form when clicking on your action link.
First change your action link to this.
#Html.ActionLink("Add Another", "AddNew", "AgreementRegistration", new { #class = "postLink", onclick="submitMyForm()" })
Then add following code
<script>
function submitMyForm(){
$("#yourFormID").submit(); //assign an id to your form and use that here
}
</script>
I've got an asp.net MVC website that consists of a topbar and a main area.
Via a js function, I want to be able to retrieve new data from my Controller and display these data in the main area of my website, but without re-rendering the topbar area.
How do I do this?
Here is what I got:
I put the topbar and all related scripts in the _layout.cshtml, scripts related to the mainview go to Display.cshtml and the data itself which I want to display go inside Partial_ChartView.cshtml
The partial view that should display my chart data is loaded inside Display.cshtml like this:
#model MobileReports.Models.ReportViewModel
#{
ViewBag.Title = "Display";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#{Html.RenderPartial("Partial_ChartView");}
The partial view Partial:ChartView.cshtml looks like this:
#model MobileReports.Models.ReportViewModel
<div id="chartContainer">#Model.Chart</div>
The corresponding controller contains this code:
public ActionResult Display(Guid? id)
{
ReportViewModel viewModel = new ReportViewModel();
Guid validId = (Guid)id;
viewModel.Chart = GetChart(guid);
viewModel.ChartData = GetData(guid);
return PartialView(viewModel);
}
When I open the page at ../Report/Display , the page seems to get rendered correctly.
Now I want to add a script that calls Display(id) with a certain value. Then I want to re-render only the main area (inside div #chartContainer) to display the new data which should now be in the model.
How do I do this?
Create a new method that returns a partial view containing only the data you need
public ActionResult Chart(GUID id)
{
.....
return PartialView(someModel);
}
then use jquery .load to replace the contents of your div
$('#chartContainer').load('#Url.Action("Chart", "Report")', { id: YourGUIDValue });
I'm pretty much a jquery newb...I've almost got this working I think, let me know if i can clarify anything.
I have a screen displaying a list..let's call them affiliates. To create a new affiliate, a modal style pop up dialogue is used.
When the dialogue "Create" button is clicked, the form data must be saved (creating a new affiliate), the dialogue disappears, and the affiliate list updates without reloading the page
The jquery file at the bottom shows how I'm trying to do it now: trying to detect a click on the "confirm" button, get the form to submit using the data target property, and using the form's target property to know what container to update.
What is happening is: nothing. The cancel button works, create button does absolutely nothing.
Also note that the "Create" button, which will act as the form's submit, is not located within the <form> tags.
I'm pretty sure I'm doing modals wrong but let's ignore that for the moment and focus on the async post and list update. I've included my relevant code below to support my post.
--AffiliateListPartial
#model IPagedList<Acme.Business.DomainModel.Affiliates.Affiliate>
<div class="items-list" id="affiliate-list-view">
#foreach (var item in Model)
{
<a href="#Url.Action("AffiliateDetails", "Vendor", new { id = item.AffiliateId })">
//basic spans and razor display list in here..nothing notable
</a>
}
</div>
The above partial view is contained within a full view, lets call it AffiliateList. Nothing particularly relevant in there except that it is controlled by the VendorController/Affiliatelist method.
The VendorController.AffiliateList looks like:
public ActionResult AffiliateList(string searchTerm = null, int page = 1)
{
var userId = WebSecurity.GetUserId(User.Identity.Name);
var model = (from a in db.Affiliates.ToList()
where a.VendorId == userId
select a).ToPagedList(page, 15);
if(Request.IsAjaxRequest()) return PartialView("_AffiliateListPartial", model);
return View(model);
}
The modal style dialoque for creating a new affiliate (I'll just include the lines that I think are relevant):
_Modal.AffiliateCreate.Partial
<form id="affiliate-create-form" class="form" method="post" action="#Url.Action("AffiliateCreate")" data-acme-ajax="true" data-acme-target="#affiliate-list-view">
// multiple input elements
</form>
<div class="modal-footer">
<button name="close_modal"><span>Cancel</span></button>
<button name="confirm" data-acme-target="#affiliate-create-form"><span>Create</span></button>
</div>
And the VendorController.AffiliateCreate method:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AffiliateCreate(Affiliate affiliate)
{
if (!ModelState.IsValid) return View(affiliate);
db.Affiliates.Add(affiliate);
db.SaveChanges();
return RedirectToAction("AffiliateList");
}
And the .js file's relevant parts:
$("button[name='confirm']").on("click", function() {
var $form = $(this).attr("data-acme-target");
var options = {
url: $form.attr("action"),
type: $form.attr("type"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr("data-acme-target"));
var $newHtml = $(data);
$target.replaceWith(data);
$newHtml.effect("highlight");
});
$(".modal_overlay").css("opacity", "0");
$(".modal_container").css("display", "none");
return false;
});
$("button[name='close_modal']").on("click", function(event) {
$(".modal_overlay").css("opacity", "0");
$(".modal_container").css("display", "none");
return false;
});
var $form = $(this).attr("data-acme-target"); is getting the attribute named 'data-acme-target' of the button, rather than the form it's associated with. So then when you're using $form.attr('action'), you aren't getting anything back.
Since data-acme-target is an ID to another control that is the form you want to submit, use $($(this).attr("data-acme-target")); to get it.
I have a WebGrid bound to a Plain Class Object. Nothing Fancy. The Grid features some paging and is used to display a list of users. The Last column of the Grid is an Ajax Action Link which fires a Pop Up DIV with some Edit Controls. On completion of this Edit the OnSuccess Event fires and closes the DIV. This is where I would like to now refresh the grid without losing the current page/search/filter applied. One way that comes to mind is to somehow grab the WebGrids Url and then refreshing it with JQuery, however.. I cant find a way to retrieve the current url and parameters? Anyone tried this before?
UPDATE: Thanks to the answers this is what I have resorted to now:)
The ActionResult called by the ajax edit
[HttpPost]
public ActionResult EditUserDetails(User model)
{
if (ModelState.IsValid)
{
// for the sake of brevity.
// do your edit logic here and then on success you return:
return Json(new { state = "success", id = "1", name = "John", surname = "Doe", etc = "blah" });
}
else
{
return Json(new { state = "failed", message="some error text here maybe?" });
}
}
Then on the edit click I set the class of the row to be .editRowSelected. (i will be changing this to an id rather)
Then onSuccess of the Ajax Update Call:
function onSuccess(ajaxContext) {
var result = eval(ajaxContext);
if (result.state == "Success") {
var row = $('.busyEditRow');
row.html(content);
$('.busyEditRow').removeClass('busyEditRow');
}
else {
// Display some error stuffs here with the message - result.message
}
}
This updates the grid row with the new data:)
Having just edited one record, rather than refreshing the entire grid and having to then post back the filters applied, current page, etc, I would have a function in my controller that returns a partial view containing data for a single user.
You could call this via AJAX after the DIV closes, and use jQuery to replace the row in the grid with the HTML returned from the function.
As long as each row in the grid is identifiable by id, it should be simple enough to find the relevant row and replace it.
I have a controller "Contracts" and 3 GET methods: "All", "Focus", which contains grid, and "Edit" for editing, and one POST method: "Edit".
Users can access to Edit from any grid by using button. But after POST executed, i want to redirect them to action that send request.
For example:
open "Focus" grid
select row
clicked edit
make changes, and click save
finally redirect to "Focus" grid (!)
or
open "All" grid
select row
clicked edit
make changes, and click save
finally redirect to "All" grid (!)
public ActionResul All()
{
var items=dbContext.Items;
return View("All",items);
}
in the All View you will have the grid with the data. Selecting a record from the Grid and clicking Edit will take you to the second Action method for Edit.
You may pass a some flag when calling the edit method here. You may add that when you build the edit link like this
#Html.ActionLink("Edit","Edit","Item",new { #id=item.Id, #from="all"},null)
So my Edit will have a querystring key "from" with a value "all"
Same way,in your the View for your Focus, you may pass a different value
#Html.ActionLink("Edit","Edit","Item",new { #id=item.Id, #from="focus"},null)
Now the Edit Action method, You read the parameter and set it as the property value of our edit view model. you may want to add this property to your ViewModel.
public ActionResult Edit(int id,string from)
{
EditItemViewModel item=GetItem(id);
item.From=from;
return View(item);
}
and this View will have the edit form. We will keep the value of From inside a form element so that we can use that on the form post.
#model EditItemViewModel
#using(Html.BeginForm())
{
#Html.HiddenFor(m => m.Id);
#Html.TextBoxFor(m => m.ItemName)
#Html.TextBoxFor(m => m.ItemDesc)
#Html.HiddenFor(m => m.From)
<input type="submit" value="Update" />
}
Where user can edit and submit it again . you handle that in the HttpPost Edit action method. Check the From property value and decide where to redirect after saving
[HttpPost]
public ActionResult Edit(EditItemViewModel model)
{
if(ModelState.IsValid)
{
//Save data
if(model.From=="all")
return RedirectToAction("All");
else
return RedirectToAction("Focus");
}
return View(model);
}
i think that your post edit can be like this
After clicking on the gridrow having (Edit/All/1 or Edit/Focus/2) you can redirect to this
public ActionResult Edit(int id, yourviewmodel viewmodel,string YourFilter)
{
return RedirectToAction(YourFilter);
}
and in global.asax you can set your route like this for the edit submit
routes.MapRoute(
"filters",
"All",
new { controller = "Contracts", action = "All" }
);
routes.MapRoute(
"filters1",
"focus",
new { controller = "Contracts", action = "focus" }
);
for edit click
routes.MapRoute(
"EditFilter",
"Edit/{YourFilter}/{id}",
new { controller = "Contract", action = "Edit",YourFilter = UrlParameter.Optional,id = UrlParameter.Optional }
);