For now, I have the following structure of the web page:
<div id="container">
<div id="navigator"></div>
<div id="content"></div>
</div>
Literally, the div with id "navigator" is for navigating use. I can choose such as "home", "login", "register", etc. I want to use ajax to refresh the whole div with id "content".
So what should I do?
1) Apparently, I need to have these separate divs. But in what form? Should I use ui:composition or else?
2) What should be the ajax part? Can you give me an example?
Related
I can not find a solution how to include blade template using button click.
For example lets say I have a main view:
<div id="HEREGOESMYTEMPLATES">
</div>
<div class="row">
<button onclick="addTemplate()">ADD TEMPLATE</button>
</div>
Then script, which should include template
<script type="app/js">
function addTemplate()
{
//Get template and include into div with id HEREGOESMYTEMPLATE
}
</script>
And then the template itself (lets say partial.blade.php):
<div>Include me to main blade file</div>
Is there any possible way by including it without creating every tag in JS and then appending to the div?
Thank you.
UPDATE.
As blade template is not supposed to do such work as it is rendered in backend, I used VueJS to this, which I believe is the best solution in this situation.
So i got a page which have a header, a navigation menu on the left(which is a partial view), and a content on the right(which is an index view). I got a problem in reloading every page's components after navigating menu.
so here's my _Layout
<body>
<div id="header">
<img alt="" src="../../Content/image/asd.png" />
</div>
<div id="menuBar"></div>
<div id="partial">
#RenderBody()
#Html.Partial("MenuPartial")
</div>
i also got a partial view named "MenuPartial" which has list of actionlink(with updateTargetID = "partial") which will update the content of Index.cshtml
and at my homecontroller the ActionResult Index return View()
then i got a little change on _viewStart
#{
Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}
So, what i need is, everytime the actionlink got clicked, the will be updated, my partial view(it has some updated value, so it has to be updated also) and my Index view. And my current result, when i click on action link, the body got rendered, index got updated, but my partial view is gone. anyone has a solution for this?
For your use Case you could perhaps wrap up the #RenderBody() into a div
<div id="content">
#RenderBody()
</div>
Now you can update the content only
$('#content').html("New fancy content")
You can then do the same with the navigation - just make it available as Action in the controller and return PartialView()
My page in working perfectly with postback. My problem is that it's kind of anoying every ingredients or subtitles that people submit, it reloads the entire page. So, I though that it could be a good way to learn a little bit of ajax... I've read a lot of article, and I got confused. Some people are using Ajax.Beginform and others are using the $.ajax from jQuery inside an event of jQuery (submit for example). I've read that the second approach is better but I don't know if it's possible with the way my form is done.
Here is the important part of my View. To summarize, I have a list of subtitle, and each of the subtitle can contain a list of ingredients. One of the form can submit ingredients, and the other can submit subtitle. The first one can appear multiple time (in each of the subtitle).
<div id="Ingredients">
<h2>Ingrédients</h2>
#foreach (RecettesMaison.Models.Subtitle sub in Model.Subtitles)
{
<h4>#Html.DisplayFor(modelItem => sub.Name)</h4>
<ul id="ing#nSubtitle">
#foreach (RecettesMaison.Models.Ingredient ing in sub.Ingredients)
{
<li>#Html.DisplayFor(modelItem => ing.QuantityAndName)</li>
}
</ul>
using (Html.BeginForm("AddIngredient", "Recipe", new { subname = sub.Name }, FormMethod.Post))
{
#Html.HiddenFor(model => model.IDRecipe)
<a name="IngredientSection" ></a>
<input class="field required span6 text-box single-line" id="nameingredient" name="nameingredient" />
<input type="submit" class="btn btn-success" value="Ajouter un ingrédient" />
}
nSubtitle++;
}
#using (Html.BeginForm("AddSubtitle", "Recipe", FormMethod.Post))
{
#Html.HiddenFor(model => model.IDRecipe)
<a name="SubtitleSection" ></a>
<input class="field required span6 text-box single-line" name="Name" />
<input type="submit" class="btn btn-success" value="Ajouter une catégorie d'ingrédient" />
}
</div>
My first approach was that if a submit is successful, I would "refresh" the two foreach with the new data. But the approach I've seen on must tutorial is to use a partial view and refresh only the partial view inside of a div. But in my case, my Html.BeginForm would be inside the partial view so I don't think it would work. I also think about just appending html at the end of my list but it will only work of the ingredient. So the best way would be to refresh both for each
So, my general question
How can I do that? :)
Thanks!
Ajax.BeginForm vs .ajax()
Both accomplish the same thing. Ajax.BeginForm will hide the javascript details so .ajax() will probably give you a better foundation in understanding the pattern especially if you ever need to work outside of MS technologies.
AJAX with Partial Views
It's entirely possible and there are many examples on the web even here on SO. The general idea is you're just replacing a div with partial view content retrieved via AJAX.
If the div is static, then your jquery selectors are quite simple.
If the div is dynamically generated, then you'll need to do some DOM traversing to find the target div.
Without seeing your attempts it is hard to give you specific help. I suggest you start with a simple example with a single partial view and form and update it using AJAX. Then you can move to a more complex situation with multiple forms once you understand the mechanics.
I have a MVC3 application, based on default layout from VS 2010, which I changed to looklike in image below
The submenu area is defined in _layout.cshtml as
<div id="sidebar">
<h3>Entities</h3>
<p></p>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
<section id="main">
#RenderBody()
</section>
and the _EntitiesMenu contains entries as below
<li>#Html.ActionLink("Addresses", "Index", "Address")</li>
<li>#Html.ActionLink("Applications", "Index", "Application")</li>
I have a single MapRoute defined as
routes.MapRoute("Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
{ controller = "Home", action = "Index", id = UrlParameter.Optional });
All my entity controllers started from menu are defined standard in Controllers and views in Views.
What I need is to change the app to use a layout as below
When users click Entities app should navigate to myapp/entities/ or myapp/entities/index and it should open a view in main work area that will look like below
Then when users click on right submenus, the url should look like myapp/entities/entity1/index, myapp/entities/entity1/edit/1, etc (exactly like now but "under" entities page.
I defined the Entities controller like
public class EntitiesController : Controller
{
public ActionResult Index()
{ return View();}
}
And it's view looks like
<div id="workarea">
// here should became new Body region, to load all views called from the other controllers
// something like #RenderBody(), but this don't works
</div>
<div id="sidebar">
<h3>Entities</h3>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
I don't want to have to make changes to entities controllers or views (or minimal changes if absolutely necessary, because there are lot of them). Can I somehow assign that area as main Body, while under scope of entities? And if user click on top Home / About, it will "unload" the EntitiesView from _layout.cshtml?
Not sure if my question is very clear, but I hope someone will understand what I'm after.
Thank you
Are you talking about #RenderSection http://blogs.msdn.com/b/marcinon/archive/2010/12/08/optional-razor-sections-with-default-content.aspx
I managed (sort of) to accomplish something close to what I need using following approach:
Changed the _layout as below
<section id="main">
<div>
#RenderBody()
</div>
<div>
#RenderSection("EntityCRUD", false)
</div>
</section>
Created the view for Entities as:
#Html.Partial("_PanelEntitiesMenu")
Defined _PanelEntitiesMenu as
<div id="sidebar">
<h3>Entities</h3>
<p></p>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
Enclosing the entities views (Index, Edit / Delete / Details / Create) in
#section EntityCRUD
{
#Html.Partial("_PanelEntitiesMenu")
//... original view code
}
Changed all involved views to have the view "body" included in section, and at the beginning of the section I load the panel menu as partial view
#section EntityCRUD
{
#Html.Partial("_PanelEntitiesMenu")
....
}
Not exactly what I wanted, but that's the best I found so far.
In a GSP (Groovy Server Page), I'm using <g:submitToRemote update="..."> to update a <div> after the server-side call.
According to the tag's documentation and other sources on the web, the target <div> can be placed arbitrarily at the page. In my testings, however, I find that the <div> needs to surround the <g:submitToRemote> tag.
If it does not, the <div> will be updated with some "random" contents (i.e., parts of the form that surround the <g:submitToRemote> tag).
Consider the following GSP code:
<html>
<head>
<g:javascript library="prototype" />
</head>
<body>
<div id="updateMe_NOT_WORKING">${message}</div>
<g:form>
<div id="updateMe_WORKING">
<g:submitToRemote value="Click Me"
action="someAction" update="updateMe_NOT_WORKING" />
</div>
</g:form>
</body>
</html>
That's on Grails 1.3.4.
What am I missing? - Thanks
According to my testings, g:submitToRemote's action attribute must not point to the current controller's current action (as this will insert/duplicate the current view into the current view).
It works if you specify an alternate action in g:submitToRemote - i.e.,
<g:submitToRemote value="Click Me"
action="ajaxAction" update="updateMe" />
If this action provides a model - i.e.,
def ajaxAction = { [message: 'foo'] }
then there needs to be a corresponding GSP - that, in this case, should state,
$message
Alternatively, the action can use the render method - like this,
def ajaxAction = { render 'foo' }
I'll leave this issue open for some time, in case there might be additional responses, and, if there aren't, will accept this answer as the solution.
Thanks
I think the problem is that you don't specify the controller for your action. Try adding controller="..." into your g:submitToRemote tag. Or at least specify it in g:form.
I'm sure that the <div> doesn't need to be wrapped.