I have an ASP.NET MVC application with a topic page that shows a list of posts. A user can 'subscribe' to any topic, and I want this to be achieved via clicking on an image, to toggle their subscription on/off. The change in their subscription status needs to be reflected via the change in this image (illuminated image when they're subscribed, greyed out image when they're not).
The image will be rendered via CSS (I'm using a sprites.png file for this and will just specify 'subscribe-on' or 'subscribe-off' as the class name for the anchor/image tag).
My experience with AJAX under MVC is extremely limited, so am hoping that someone can recommend how to best achieve this? I understand the general concept of how it might work (I could use jQuery to bind an ajax call to the click event of the image, which performs the server-side operation, then I essentially want to change the class assigned to that image (to 'subscribe-on' if the user is now subscribed etc.) but I'm not familiar with the underlying code to achieve it.
I would also ideally like to toggle the title text of the anchor tag that wraps the image, so it prompts the user to either 'click to subscribe' or 'click to unsubscribe'.
Like you said, the steps you need are:
Bind to click event on image http://api.jquery.com/click/
Make ajax request to update data on server http://api.jquery.com/jQuery.post/
Handle ajax request on server.
Change class of image in callback function http://api.jquery.com/toggleClass/
Change title of image in callback function http://api.jquery.com/attr/
Example:
$('#subscribeimg').click(function() {
var that = $(this);
var id = // get id for topic
$.post('controller/action', { id: id }, function() {
that.toggleClass('subscribe-off subscribe-on');
that.attr('title', that.hasClass('subscribe-on') ? 'click to unsubscribe' : 'click to subscribe');
});
});
JS Fiddle Example without Ajax
MVC:
public ActionResult Subscribe(int id)
{
// Update database to subscribe/unsubscribe
}
Related
Using a asp mvc system, I would like to perform some kind of user notification that a record was added into the database.
Current paradigm... navPage -> modPage -> datagridPage -> newDatabasePage -> (record added action) This is where it stops, the user is not notified that record is added or failure, it simply reloads the view.
Currently - i am using some text in a viewbag variable after the record was added and based on this value, display a simple javascript message box. But I think there is a better way.
Was thinking that a modal popup implemented through jquery would accomplish this task, but i was educated this was not an optimal solution without using a messaging framework (signalR etc).
Another approach was to use an additional partial page - another partial page????
Any different options that i have missed here would be greatly appreciated.
You can add some beautiful notifications using sweetalert2, here is the documentation
Are you using Bootstrap (or similar)?
Can you not just pass some information into a hidden-as-default alert div?
Assuming you're using EF, when you save an object you can capture the new Id so you can just check for this.
Instead of reloading the view, redirect to the action that creates the initial view and change it so you can pass in the new Id:
int newId = _context.SaveChanges();
return RedirectToAction("GridView", new { Id = newId });
Then change the signature of the Action:
public async Task<ActionResult> GridView(int? Id)
You can then just check if the Id has a value and do something with that information. Then just add that to the ViewModel for the page and display the alert if required:
if (Id.HasValue)
{
viewModel.displayAlert = true;
}
If you don't want to reload the view in full then you can accomplish the same thing using Ajax calls.
My web page uses Jquery to overload a screen. In this overlay, the user can type some detail and click the submit button.
What I'd like to do is, when the user clicks on submit, the overlay doesn't disappear (as it would do with a page refresh), but a message appears, such as "all done"
The question I have though, is, what is the correct return type? I've gotten myself into a muddle I'm sure.
I tried to make the return type string, and return the string. Sadly, this redirected me to a page with the string value.
I then thought I would need to return a ContentResult() with return Content(myString). The result was the same as returning a string.
I then tried to return void, and simply in my controller use ViewBag.Status ="All done"; This now takes me an empty page.
How can I make the message show "All done" or "Complete" without losing the state? Am I trying to do the impossible without Ajax or similar?
Yes, you are trying to do the impossible. When a controller action gets hit on a synchronous request (e.g. a form submission) you are always going to get a full-page load. That's exactly what a synchronous request is. In effect, the "refresh" has already happened before your action code even runs; the return type of the action is irrelevant. For partial updates, you need an asynchronous request, which means AJAX.
The typical approach to this would be to load in your overlay and then, submit the form from the overlay via AJAX, return a partial view and target a container with jQuery. You'd typically create some kind of generic wrapper for your overlays that will do this for all form posts within any overlay.
Alternatively, you could look at returning JSON and using a JavaScript templating engine like Handlebars to populate the view.
Either way it's a good idea to look at wrapping all of this up in some "generic" JavaScript code that will do the same thing for form posts in all of your overlays; then you can stop worrying about the client-side code and focus on just returning the right thing from your controller actions.
If you want to do that WITHOUT ajax, you will need to return the whole underlaying page again, including the popup in a visible state.
What you (probably) SHOULD do is to use ajax and return a json result. Something like this jQuery solution:
$(document).on('click', '[type="submit"]', function(){
var $form = $(this).closest('form');
$.ajax({
url: $form.action,
type: 'post',
data: $form.serialize(),
success: function(response){
// write success message to user
}
});
});
I am using MVC3, C#, Razor, EF4.1, SQLServer 2008.
I have a parent form with a dropdown for "Suppliers". I wish to add a "quick add" link/button that enables the user to quickly add a supplier to the DB which is then available in the dropdown for selection. At present this is achieved by
Parent Page -> Add Supplier Page -> Parent Page(Page Refresh)
Of course on return to the parent page, it refreshes and removes all non saved data - which is a problem. It would be better to have a popup window which then saves the suppliers and then just refreshes the dropdown portion of the parent page form. So I believe I am seeking an approach to:
Parent Page -> Popup(Modal) -> DB Save -> Refresh DropDown in Parent Page (Ajax???) -> close Modal popup.
I would appreciate guidance on the above, as I am a little stuck on the best practice and hopefully simple approach to this.
Many thanks.
I normally do something like this:
Create an 'Add' button that will display a popup. (I use jQuery dialogs. They are simple, free, and easily to implement by just calling .dialog on a div). Inside this dialog have the appropriate fields needed to create a new supplier. Have a 'Save' button in this dialog and have it wired up to a AJAX post. (Again this is very simple using jQuery)
If you do use jQuery its as simple as submitting that form to your controller action that will then call you data access layer to save the new supplier entity. When the AJAX call comes back successfully you can reload the contents of the supplier grid with another AJAX post. All the 'Magic' comes from implementing AJAX really which will allow for you to retain the users input and not reload the whole page. The AJAX call that is executed after the user enters in a new Supplier and clicks save would look something like this:
In your JavaScript:
$.ajax({
url: "ControllerName/SaveNewSupplier",
Data: $('#YourAddNewSupplierFormName').serialize(),
Type: "POST"
Success: function(result) {
// this is what will get called after a successful save and return of your action method on your controller. This is where you will put the call to repopulate the supplier list with the updated list.
UpdateSupplierList(); // This function is created below
}
});
In your controller:
Public JsonResult SaveNewSupplier (NewSupplierModel newSupplier)
{
// save your new supplier through your data access layer
// if save is successful then return
Return Json({success = true}, JsonRequestBehavior.AllowGet)
}
Then to repopulate the initial div that contains all the suppliers do something like this:
In JavaScript:
function UpdateSupplierList()
{
$.ajax({
url: "ControllerName/GetAllSuppliers",
Type: "GET"
Success: function(result) {
$('#SuppliersDiv').html(result.suppliers)
}
And in your controller:
// remember that a lot of this is pseudo code and your will have to implement it better for your situation. But basically its just:
Public JsonResult GetAllSuppliers()
{
var suppliers = db.GetSuppliers()
return Jason({suppliers = suppliers}, JsonRequestBehavior.AllowGet);
}
EDIT: If you are updating a SelectList via jQuery then this article is almost identical to what I explained but goes into much more detail on updating the select list. Hope this helps.
http://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/
I have a view, say show.js.erb. And I have a link in another view such that
link_to "MyLink", my_object_path, :remote => true
successfully returns the show.js.erb view. My question is, from within that view, is there any way to access the element that triggered the AJAX call without having to resort to generating an id specific to individual elements a la ...
I want to be able to use this view callback to open a small dialog next to whatever element was clicked on, but I can't seem to find a way to access the triggering element.
I tried using $(this) but that doesn't work.
I'd like to do something along the lines of
$(this).after("some new html here");
My solution was to bind a pre-submit class to the element, in my case a popup modal window. It's a similar solution to the post linked to above in that it uses the pre-submit bindings, but tailored to use classes instead.
In public/javascripts/application.rb:
jQuery(function($) {
$(".poppable").bind("ajax:loading", function() { $(this).addClass("popped"); });
});
Then in my view for the popup content (e.g. app/views/mymodel/popup.js.erb):
var p = $(".poppable.popped");
p.removeClass("popped");
/* Do what I need to with p ... */
If this doesn't look kosher, I'm all ears but it works for now.
I have a page that displays a list with a of elements with a large number of elements, each of which has a boolean property, representing an Enabled and a Disabled state.
I need to provide the user with a link for each list item, and the link text must show the opposite status (so if the item is enabled, the link text must display 'Disable').
When the user clicks the link for a Disabled, the corresponding link text for the item must change to 'Enable' (and vice versa).
I would like to NOT reload the entire list for each click, just the text of the ActionLink itself, so my question is:
Is it possible to update just an ActionLink itself when the user clicks the link, or do I have do handle this using custom javascript?
As far as I remember, you can add HTML attributes to the "a" tag by newing up an anonymous class as the last param on most overloads.
Off the top of my head this can be written like the following:
Html.ActionLink("Name", "Action", "Controller", new { #class = 'updateId' });
(You may be able to do this with an ID which would be preferable over a class - if not just use a unique class name to avoid updating multiple items.)
Then you can use javascript to access the class "updateId" and change the inner html.
In the case of jQuery:
$("a.updateId").html("NewName");
This can be done with a custom user control contained within the element to update. A writeup of the solution can be found here. No custom client-side scripting is necessary.