I am preparing a mvc 4 application and I am pretty new to it. I would like to implement a functionality like by double clicking a row of mvc 4 webgrid I should call an action method in ajax. But unfortunately I could not find how to implement double click on mvc 4 web grid.
Can you please help me on that?
You could use the .dblclick() event in jQuery. For example:
<script type="text/javascript">
$(function() {
$('table td').dblclick(function() {
$.ajax({
url: '#Url.Action("SomeAction", "SomeController")',
type: 'POST',
success: function(result) {
// do something with the result from your AJAX call
}
});
});
});
</script>
Obviously there are lots of improvements that could be done to this code. For example you could use HTML5 data-* attributes on your grid to specify the url to the controller action that needs to be invoked and then externalize this script in a separate javascript file. You might also need to adjust the jQuery selector to match your WebGrid element.
Related
Earlier in MVC I used #Ajax.ActionLink for Ajax call and replaced container in my layout.
Now in .Net Core there is anything like AjaxHelper back then.
How can I form Ajax call without writing jquery script for every menu item in my dashboard.
I tried #Url.Action with anonymous Ajax parameters but that won't work.
#Url.Action("Index", "User", new
{
data_ajax = "true",
data_ajax_method = "GET",
data_ajax_mode = "replace",
data_ajax_update = "#replace"
}))"
No. Honestly, you never needed it anyways. All it did was create a regular link and then add a trivial bit of JavaScript you can easily add yourself. Long and short, let it go:
<a class="menu-item" asp-action="Index" asp-controller="User">Click Me</a>
Then:
<script>
$('.menu-item').on('click', function (e) {
e.preventDefault();
$.get(this.href, function (html) {
$('#replace').html(html);
});
});
</script>
By binding to the class, you only need this one piece of JS for any link with a menu-item class.
I like the new tag helpers attributes which make readable dynamic html contents. I can create a link by using the asp-controller and asp-action attributes like this:
<a asp-controller="Home" asp-action="Index">Index</a>
The problem is that there are cases where I need just the URL of the action in order to use it my javascript. For example in order to make an ajax call in ASP.NET MVC 5, I could have the following code:
$.ajax({
type: "POST",
url: '#Url.Action("GetData","Ajax")',
data: "{ }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
}
});
I tried to find an equivalent method in ASP.NET Core but I was not able to find one so I have to create the URL myself. Is there a way to get the Action and Razor Page URL in ASP.NET Core.
I just found how to do it. In case someone else is looking for the same thing here is how to do it.
#this.Url.Action("Index", "Home")
I'm using the Twitter Bootstrap modal as a login window, and would like it remains open if user put wrong login info. My Page refreshed after submitting the form.Is there a way after refresh page modal open again and I an show the message there that Login Failed:Please try again.
You will have to trigger the modal when there is an error after a post back.
You could have the server print out some javascript to trigger the modal after a post back ONLY on an error condition. You didn't mention what server side technology you are using, so here is some psuedo server side code:
if (hasAuthenticationErrors)
<script type="text/javascript">
$('#myModal').modal('show');
</script>
end if
That bit of javascript would have to be rendered AFTER the modal is initialized with a show:false option
$('#myModal').modal({ show: false})
see: How can I trigger a Bootstrap modal programmatically?
The scenario is certainly possible, but not even necessary. You should use the preventDefault in order to withhold the form from submitting the page. That is, if you use AJAX, which looks to be the perfect place for it.
An example would be
$(function () {
var frm = $('#form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
});
Im new to MVC and I need to know How to invoke Action Methods from a view's buttons. And i need to clarify the difference between button and submit
Thanks
The buttons usually belong to a form tag. A form has a submit url. When the button <input type="submit" value="Submit"> is pressed you are redirected to the url written in form submit. Action Method is tied to a web page. For example if you go to www.eample.com/home/hello you execute Hello action in Home controller.
You can use jQuery to fire AJAX calls to specific pages (for example /home/process) and change the data on the page. To do that you should bind onclick javascript event on the button and there perform ajax call.
Example of AJAX call when page is loaded:
function loadContent() {
$.ajax({
type: 'get',
url: 'Page.html',
contentType: 'application/html; charset=utf-8',
dataType: 'html',
beforeSend: sendContent,
success: successContent,
error: errorContent
});
}
function sendContent() {
////loading
}
function successContent(data, status) {
$("#content .main").html(data);
$("#content").show();
}
function errorContent(request, status, error) {
////error
}
$(function () {
loadContent();
});
I would like to automatically click the submit button of an Ajax enabled form, so that the user does not have to click the button (but can optionally).
Right now, I'm working on the first boundary, which is to call the form from Javascript, so that at the very least, once i build my timer, I will have this part figured out.
I've tried many ways to do this, and NONE work. Please keep in mind that this is an ASP.NET MVC 4 Mobile application (which uses jquery.mobile) but I do have the jquery.mobile ajax disabled so that my button works at all (creating manual ajax based forms with updating divs, does not work in a jquery.mobile app because it hooks on the submit of all ajax forms).
So my current button works fine, I just can't seem to fire it programmatically.
I have my form:
<% using (Ajax.BeginForm("SendLocation", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "result", HttpMethod = "POST" }, new { #id = "locationForm" }))
{ %>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
<li><%: Html.ActionLink("Support", "Support", "Home")%></li>
<li data-role="list-divider">Location</li>
<%: Html.HiddenFor(model => model.GPSLongitude)%>
<%: Html.HiddenFor(model => model.GPSLatitude)%>
<li><input type="submit" id="submitButton" value="Send" /></li>
</ul>
<% } %>
I have tried to do this in javascript:
$.ajax({
type: "POST",
url: action,
success: function () {
alert('success');
}
});
And I do get the server code firing that normally would. However, the DIV is not updated and also, the model was not intact either (it existed with all internal values null, so i assume newly instantiated).
I have also tried different ways to fire the form:
var form = $('#locationForm', $('#myForm'));
if (form == null) {
alert('could not find form');
} else {
alert('firigin on form');
form.submit(function (event) { eval($(this).attr("onsubmit")); return false; });
form.submit();
}
This did not work either:
var f = $('#locationForm', $('#myForm'));
var action = f.attr("action");
var data = f.attr("data");
$.post(action, data, function() { alert('back'); });
Which were all ways to do this that I found throughout the web.
None of them worked to fire the form and have it work the way it would normally as if a user had pressed the submit button themselves. Of course, once this fails, if I hit my submit button, it works perfectly...
Using Chrome Developer Tools, I found that the $.ajax call needs to have valid data before it will even attempt to function.
I was getting a silent Internal 500 Error on the post. But of course because of AJAX it was silent and the controller was not firing because it didn't get past IIS.
So I found out that the data I was sending, saying its JSON, was not and the .serialize() does not use JSON formatting. I tried to incorporate the JSON Javascript libraries to convert the object into JavaScript, however, this does not work either, because the Data Model object (or the form object) seems to not be compatible with those libraries. I would get errors in the JavaScript console and those libraries would crash when trying.
I decided to actually just pass the object I want manually:
var encoded = '{ GPSLongitude: ' + $('#GPSLongitude', $('#myForm')).val() + ',GPSLatitude: ' + $('#GPSLatitude', $('#myForm')).val() + '}';
Which passed the hidden fields i wanted to send (GPS LON/LAT) to the controller, and the model was intact in the controller call!
Now, for anyone that is reading this answer. the actual AJAX update process that is supposed to update the view, failed to work. Although for my purpose, I did not actually need the view to update correctly. Eventhough a partial view is returned, the special AJAX call seems to break the linkage between the form's div to update.
However, since the data was passed to the controller intact, this basically passed the GPS data that I needed to the server which was my ultimate goal.
make sure you are including the proper js libraries.
you need. jquery.js, jquery.unobtrusive-ajax.js
make sure unobtrusivejavascriptenabled = true in the web.confg
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
please try $('#locationForm').submit();
does it give error message?
if you're using i.e. you can look use the develper tools to look at network traffic to make sure nothing is sent.