I'm displaying dynamically selected columns as a grid(using webgrid) in partial view.When i perform paging on partial view webgrid,that partial view grid alone loading again in new page.I want to get the pagination for partial view without redirecting partialview alone into newpage.
Judging from the code you provided it seems that you are setting the ajaxUpdateContainerId to "result" but there is not any control with that id on your page you can set the id in .GetHtml() method by providing HtmlAttributes.
So the edited line would look something like this:
#grid1.GetHtml(htmlAttributes: new { id="result" },tableStyle: "WebGrid", headerStyle: "Header", alternatingRowStyle: "alt", columns: ViewBag.Columns)
Please check this link for more details
Related
I have a dashboard type page which contains multiple partial views each of which contain a webgrid.
For example this is web grids is in my _CurrentSubscriptions partial view:
WebGrid grid = new WebGrid(Model.Titles,
rowsPerPage: Model.PageSize,
defaultSort: "Name",
ajaxUpdateContainerId: "UserSubscriptions");
#grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Remove", "RemoveSub")</text>)));
I also have an _addSubscription partial view which contains the following grid to show search results.
WebGrid grid = new WebGrid(Model.Titles,
rowsPerPage: Model.PageSize,
defaultSort: "Name",
ajaxUpdateContainerId: "TitlesFound");
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Add", "AddSub")</text>)));
Both partial views are called from my Subscriptions/index.cshtml
Is it possible to restrict the paging on each of the grids from reloading the page and just update the selected grid?
Wrap your grid in a div with an Id.
(You have already done this) When you instantiate the grid, specify the AJAX parameter
ajaxUpdateContainerId with the div's Id.
Reload your page.
Click another page and notice there is no page post back; only the grid reloads.
<div id="UserSubscriptions">
#grid.GetHtml(columns:
grid.Columns(grid.Column("Name"),
grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Add", "AddSub")</text>)));
</div>
I just started using WebGrid and I have been searching a proper way to delete a row.
But I don't want to use solutions which redirects the user an other window. I just want that when the user clicks delete then pop up a confirm window and if the user choose yes, delete the data and refresh the page, but with ajax.
I have found a way to do this, but I have not seen other people do it on the Internet in the same way and I want to know if it is a good practice to follow it in the future.
In the WebGrid I have the following column definition:
grid.Column(header: "", format: #<text> <button type="submit" name="Delete" value="#item.Id">Delete</button></text>)
It is in a #Ajax.Beginform(...) { ... }
In my Controller I check if a Delete button was clicked and get the Id this way:
[HttpPost]
public ActionResult Index(ManageOvertimesViewModel model, FormCollection formCollection)
{
...
if (formCollection["Delete"] != null)
{
int id = int.Parse(formCollection["Delete"]);
//Delete the data
return PartialView("IndexPartial", model);
}
...
}
When I delete something in this view other data displayed can be changed, so I need to have the posted ViewModel to recreate some DropDowns in the view and this is the reason I don't use Ajax.ActionLink to solve the delete.
So is it a good way to achieve delete?
Here you have example from View:
grid.Column("", "", canSort: false, format:#<b>#Html.ActionLink("Delete", "DeletePrizeRun", new { id = item.ID })</b>, style: "column")
Here code from controller:
public ActionResult DeletePrizeRun(int id)
{
using (var context = new ExampleDataContext())
{
var prizeRun = context.PrizeRuns.FirstOrDefault(p => p.id == id);
context.PrizeRuns.Remove(prizeRun);
context.SaveChanges();
}
}
For your solution the Grid has to be inside the the Ajax form. The ajax form will do partial updates and the grid will do (if you specify an ajax target which you must if you want to avoid page reloads, at least if you are using paging and sorting with pager / sort headers generated by WebGrid). That is where my headache with a similar solution started. The Grid started to behave strangely when sorting or paging, e.g. the controller was executed multiple times.
I ended up giving up on WebGrid and I am now using html tables with razor commands which works great and provides much better control.
I recommend not to use WebGrid for anything but the most simple demo.
Other than that I see no problem with your approach, using name / value to pass data to the controller worked for me.
i am new in mvc. now learning. i was searching various technique to load partial view in mvc and i got good one in stackoverflow. here it is.
If you want to load the partial view directly inside the main view you could use the Html.Action helper:
#Html.Action("Load", "Home")
or if you don't want to go through the Load action use the HtmlPartial hepler:
#Html.Partial("_LoadView")
If you want to use Ajax.ActionLink, replace your Html.ActionLink with:
#Ajax.ActionLink(
"load partial view",
"Load",
"Home",
new AjaxOptions { UpdateTargetId = "result" }
)
and of course you need to include a holder in your page where the partial will be displayed:
<div id="result"></div>
Also don't forget to include:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
in your main view in order to enable Ajax.* helpers. And make sure that unobtrusive javascript is enabled in your web.config (it should be by default):
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
after going through the above code one confusion occur. help require. my confusion as below.
#Html.Action("Load", "Home")
#Html.Partial("_LoadView")
i know the use of #Html.Partial("_LoadView") but do not understand how #Html.Action("Load", "Home") will work ?
can anyone show me couple of example to show the various usage of
#Html.Action("Load", "Home")
and how it is different from #Html.Partial("_LoadView")
thanks
Html.Partial
Renders the partial view as an HTML-encoded string.
This method result can be stored in a variable, since it returns string type value.
Simple to use and no need to create any action.
Partial method is useful used when the displaying data in the partial view is already in the corresponding view model.For example : In a blog to show comments of an article, we would like to use RenderPartial method since an article information with comments are already populated in the view model.
#Html.Partial("_Comments")
Html.Action
Renders the partial view as an HtmlString .
For this method, we need to create a child action for the rendering the partial view.
This method result can be stored in a variable, since it returns string type value.
Action method is useful when the displaying data in the partial view is independent from corresponding view model.For example : In a blog to show category list on each and every page, we would like to use Action method since the list of category is populated by the different model.
#{Html.Action("Category","Home");}
#Html.Action("Load", "Home")
Will execute the "Load" ActionResult in your "HomeController".
This Action may return any of these (ref: MSDN):
ContentResult
EmptyResult
FileResult
HttpUnauthorizedResult
JavaScriptResult
JsonResult
RedirectResult
RedirectToRouteResult
ViewResultBase
While
#Html.Partial("_LoadView")
Will insert your partial view "_LoadView" into your current view.
If you're familiar with web forms, think of your partial views as .ascx (user controls).
Edit:
Example of usage of #Html.Action():
Say you have this view:
<p>Here is my name: #Html.Action("Name")</p>
And this is my controller (As you see, I use the overload of Html.Action() that implicit uses the controller you're routed to):
public class FooController : Controller
{
//
// GET: /Foo/
public ActionResult Index()
{
return View();
}
// GET: /Foo/Name
public ActionResult Name()
{
return Content("Annish");
}
}
My MVC page has a Parent view that show the Parish page. Every Parish has multiple Churches and Every Church has its Own mass times. Parish page has Churches as Partial View but I want to use Church ID to render another Parital view of Mass times (Stored Procidure). How can use the ID of a partial view and create anothe partial view. I had been banging my head but unable to get this resolved.
render the Partial view in Side the Div tag. Then use the div ID and Clone the div to create a another partial view.
See below code sample.
<Div id="SomeId">
//Render your partial view here.
</Div>
Clone the Div and create as many partial view u need.
I finally got it working... I was now able to get the Partial view work...
Stored Procedure inside the controller:
public ActionResult Timing(int id)
{
var massTimings = db.masTimings(id);
return PartialView(massTimings);
}
My View inside Locations Partial View:
#Html.Action("Timing",new {id = item.LocationID})
I'm using a WebGrid to create a paged/sortable list in MVC3. I've created an AJAX enabled Delete button which makes the delete call via AJAX, after which I'd like it to remove the row from the table.
The way I'd like to achieve this is by having an id or data-id attribute on the <tr> in the table so that I can easily manipulate it using jQuery. However I can't work out how to add attributes to rows when using a WebGrid.
I know that attributes can easily set at the grid level like so:
#grid.GetHtml(htmlAttributes: new { id = "gridMapping", style = "width:100%;" },
However I don't know how to achieve the same at the row/column level.
#grid.GetHtml(
columns: grid.Columns(
grid.Column(format: (item) => Html.CheckBox("SelectedInvoice",new { value=item.transactionId})),
//// rest of your columns here
)
)
so one way would be putting an HTML helper method in place that can handle your htmlAttributes.
Other way - using combination of format: and Html.Raw
And the last, but may be the easiest: javascript (jQuery)
so you can try something like :
$('#grid tr').each(function(){
$(this).attr('yourhtmlattribute','value');
});
and in similar way for TDs.
Here is how I achieved this
In your webgrid set up add this to one of the colums.
grid.Column("UserName", "User Name", format: #<text><span data-id='#item.Id'>#item.UserName</span></text>, canSort: true),
No when the HTML grid is rendered you will get this.
<tr jQuery45435434="3"> <span data-userid="1">Fred Smith</span></tr>
<tr jQuery45435434="4"> <span data-userid="2">Sally Smith</span></tr>
<tr jQuery45435434="5"> <span data-userid="3">Joe Smith</span></tr>