MVC: Refreshing a grid via jQuery - c#

I have a grid (foreach in view) which is shown based on a GET request.
For the POST request, I want to return a filtered view of the grid. The grid is already a partial view, so just returning the grid is no problem.
However, I am looking for some sample code on how I get my filter conditions (there are quite a few, I would have those selected clientside via dropdowns) back to the controller's POST request.
I'd really appreciate some sample code, client & server side using jQuery as the Javascript library for the client side code.
Thank you!

I write code like this.
var url = '<%= Url.Action("List", new { controller = "ControllerName" }) %>';
$.post(url,
$("#criteria_form").serialize(),
function(data) {
$("#list_holder").html(data);
}
);

The C# part would look like this, if you use Craig's example, note that the action's arguments need to have the same name as in the html search criteria form !
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(string searchtext)
{
// retrieve data here based on searchtext
//return partial view to be used in the grid
return View("_partial", myDataCollection)
}
You can also look into jQuery addons like jqGrid or TableSorter.

Related

Edit ViewBag based on dropdownlist selected

i have some form with dropdownlist, i want when i select that dropdownlist, the value is passed into controller without page reload, and then change that form based on value pased, without page reload too. I have search for reference like ajax, etc, but none works for me. Please help,
I have two action in controller with that view, one to show the form and one to process httppost with that form, do i have to make one more for this?
Thankyou
What you could do is use an Ajax:
-It's be better to use MVC API controller. (Read about Api controller)
-If you want to use the controller then add the path to the routing table
Example:
-Your dropdown list onSelection/Change should trigger your JavaScript function.
-Your javaScript function should contain the following:
-(Read about how to pass json Objects around).
var json = { //You will use json to send your selected value to your controller or api
selectedValue: SelectedValue
}
$.post("//Path for controller/FolderName/Controller/MethodName", json, function (data) {
//Code after data received
if(data.success == true){//display message etc)
});
Alternative:
Create another page with the form and use razor to edit the form.
You could try the $get function in Jquery.
On change event of the drop down you can call a javaScript method to use $get:
Example
$.get(url, function (data) {
$YourDiv.html(data); //re-insert the form into the page
}
https://api.jquery.com/jquery.get/

asp:dropdownlist change dynamically

Is there any chance, when I select a row from asp:dropdownlist, dynamically change page, execute sql query and after result, change selected row in second asp:dropdownlist?
If this isn't possible only with asp.net and codebehind, please let me know how to execute SELECT-query in javascript (may be with Ajax; but I don't understand it) and change second dropdown's selected row.
Thanks!
Its a bit of a generic question because there is a couple of options that you could do plus I'm not 100% sure what you want to do. In short you could use AJAX to contact a PHP page which will do an operation on your database. A result it generated and sent back to the client. You could use JSON to hold the data that is getting sent to the browser.
All AJAX does is allow you to get data from another location based on the URI you give. I would use the JQuery library as it makes it easy to implement AJAX.
// This will trigger ajax whenever the is a change in the drop down. I am assuming the drop down class is .dropdown
$('.dropdown').change(function() {
$.ajax({
type: "POST",
url: "page_change.php",
data: { name: "about_us" }
dataType:JSON,
success: function(data) {
//The data returned from test.php is loaded in the .result tag
$('.result').html(data.html);
// If you want to change page you would execute
window.location(data.url);
}
});
});
page_change.php will then contact your database and generate JSON.
More information about JQuery AJAX here:
http://api.jquery.com/jQuery.ajax/
You will need to look at JQuery, AJAX, PHP and JSON to change data on your page.
If you just want to change page on a drop down change I suppose you could store the page name in the option id?
$('.dropdown').change(function() {
var page = $(this).attr('id');
window.location(page + ".html");
});

.NET / jquery - previewing a form result/rendering a view to a string

Here's the situation (using MVC 2.0):
I'm trying to build a feature to allow a user to preview changes they make to their bio/profile without actually committing their changes first. User fills out a form, clicks a "Preview" button and see what their changes look like. One difficulty is the front-end has a different master-page, so we need to render the whole view, not just a control.
Here's the approach I took:
Asynch post the serialized form to a controller action
Manipulate the model to flesh out the collections, etc. that don't get posted
Return the front-end view, passing it this modified model
Catch the response to the asynch method, wrap it in an iframe and write that to a lightboxed div on the page
Code I'm using... Controller action (the BuildPreview method just alters the model slightly)
[HttpPost]
[Authorize]
public ActionResult PreviewProfile(PersonModel model)
{
return View("Person", PeopleService.BuildPreview(model));;
}
HTML/Jquery stuff:
<script type="text/javascript">
$(document).ready(function () {
$("#previewButton").click(function (e) {
$.post("/PreviewProfile", $("#bioForm").serialize(), function (response) {
$("#previewFrame").html(response);
$("#holdMyPreview").modal({
overlayClose: true,
escClose: true,
autoResize: true,
}, "html");
});
});
});
The modal method is just a basic lightbox-esque thing.
Running into two problems:
EDIT - removed this, I was accidentally pulling a child control
The iframe isn't rendering the html (perhaps because it's not valid b/c it's missing html/body/head tags?). If I just drop the response direcltly into the div, without the iframe, it works... albiet with the wrong stylesheet. If I try to insert it into iframe it just treats it as an empty page, just the html, head and body tags show up.
Any thoughts?
Sam
PS: Tried this over at MSDN forums (http://forums.asp.net/t/1675995.aspx/1?Rendering+a+view+into+a+string+) and it didn't get anywhere, figured I'd see if SO has any brilliance.
so, just massage the response when you get it back, add the missing html/body/head
$.post("/PreviewProfile", $("#bioForm").serialize(), function (response) {
response = "<html><body>"+response+"</body></html>";
$("#previewFrame").html(response);
$("#holdMyPreview").modal({
overlayClose: true,
escClose: true,
autoResize: true,
}, "html");
});

ASP.NET MVC - how to get the value from a textbox in my View?

If I have a textbox in my view:
<div><%= Html.TextBox("Comments", Model.Comments)%></div>
I want to post the contents of this textbox to the controller with an Ajax call. I only need this one value though, so I don't want to post the whole form back.
<%= Ajax.ActionLink("update", "UpdateComments",
new { comments = /* ????? */ },
new AjaxOptions { HttpMethod="POST" })%>
How do I get the textbox value?
Rather than writing server-side ajax code, you should use client-side Ajax (e.g. jQuery) to get the runtime value of the textbox and post that value.
using jQuery, you could retrieve the value in the following manner.
$("#Comments").val();
Ajax.ActionLink is a helper function, that generates a JS-enabled link, that sends data via AJAX. Because it is generated serverside, and the value is generated on the client side, you can not pass a single value like that. You either have to manually write HTML and JS, or submit a whole form containing this element (and watch out not to nest it inside another form).
You can use Ajax in jquery. Like this
function FunctionName() {
$.Post(URl, function(data) {
});
}

How do I load views independent of the site.master?

I'm preparing an application I wrote in ASP.Net MVC for some light Ajax-y stuff. Basically, I want users to be able to go to different parts of the page without it reloading.
To do this I want to be able to reload the body of my page.
My site master is broken down into a head body and foot div. I want to be able to use something like $("body").load(whateverlink) to refresh the body, but in my case doing this causes the website to be rendered inside the body.
How can I do this successfully?
EDIT: The page is made up of views, not partialviews. In theory I could go and convert all my pages to partials but I'm looking for a way around that if possible.
Thanks
You can get your controllers to return partial views, using JQuery to do a request and update a div with your page content:
JQuery:
function navigate(url){
$.ajax({
url: "/Home/Index",
cache: false,
success: function(html){
$("#content").html(html);
}
});
}
Controller:
public class HomeController : Controller
{
public void Index()
{
return this.PartialView();
}
}
There is a helpful article on BrightMix which might help. It basically renders a partial to a string, which you could then return as part of a ContentResult.

Categories

Resources