I have a left side navigation menu on my page.. using url.action like below.. I am trying to bring in a view immediately adjacent(right side of the menu) based on what link is clicked.. I put in a div next to the navigation menu.. but have no idea how to display the appropriate contents in that div...
<table>
<tr><td><a href='#Url.Action("ActionName1", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image1.png")'/></a></td></tr>
<tr><td><a href='#Url.Action("ActionName2", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image2.png")'/></a></td></tr>
</table>
<div id="DISPLAYVIEWHERE">DISPLAY VIEW HERE based on link that is clicked</div>
In controller, ActionName1 code I have this...
public ActionResult ActionName1()
{
var model = new ViewModel();
return PartialView("PartialView1", model);
}
When I run this, the partialview1 is opened in a new page. How can I get this partial view opened in the same page as the navigation menu, immediately to the right of the menu..so based on what link is clicked, partialview1 or partialview2 is displayed next to the navigation menu... thanks for your help.
you have to use ajax in that case. you can add some class to your anchor tags like
<a class='handle' href='#Url.Action("ActionName1", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image1.png")'/></a>
<a class='handle' href='#Url.Action("ActionName2", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image2.png")'/></a>
and then you can hook up the click event of these links using jquery and send an ajax call like
$('.handle').live('click', function(){
$.ajax({
url:this.href,
type='post',
success:function(data)
{
//data contains the result returned by server you can put it in div here
$('#DISPLAYVIEWHERE').html(data);
}
});
//here you have to return false to prevent anchor from taking you to other page
return false;
});
Related
I'm building a .Net Core application. The user interacts with a form that contains some general information. On the form there is a partialview that is dynamic. This section is populated based on the press of a button, and displays the same partial view depending upon how many times the user presses the button. Think of it like this since I can't describe my actual use case. A user is enrolled in school. The form contains general information on the student. There is a button on the form for adding courses. The user clicks the button and the partial view is populated with the ability to add a single course. The user clicks the button and now the partial view has sections for 2 courses, etc. I tried what I saw at this link Dynamically Append View With MVC Partial View. The issue I am having is that I can't prevent the main form's POST action from firing.
Here is my code:
<div class="row">
<form asp-action="Edit" class="page-content">
...FORM CODE HERE...
<button id="Btn_AddEngagement" type="submit" style="height: 36px; width: 36px;">Add Engagement</button>
<div class="EngagementClass">
#{
await Html.RenderPartialAsync("_Engagements.cshtml");
}
</div>
</form>
</div>
<script>
$(function() {
$(document).on('click', '#Btn_AddEngagement', function(e) {
e.preventDefault;
$.ajax({
url: '/Issue/DisplayNewEngagement',
success: function(partialView) {
$('.EngagementClass').append(partialView);
}
});
})
});
</script>
And in the controller:
public ActionResult DisplayNewEngagement()
{
return PartialView("_Engagements");
}
When I press the Add Engagement button, the partial view gets appended, BUT then the main form's SUBMIT action gets fired. I tried using e.preventdefault, but that didn't work. How can I add/append partial views and prevent the main form's submit from firing?
I work on mvc 5 project.
On my _Layout.cshtml I have html element named id="topBar" this element displayed in each page.
But I have page named About.cshtml I don't want this page to display only element id="topBar" all other html elements in _Layout.cshtml I want them to be displayed normal in About.cshtml.
Any idea how can achieve described appearance above?
One simple way of achieving this (without javascript), is to set a value in ViewBag inside your about Action and use it in layout like this:
_Layout.cshtml
#if (ViewBag.ShowTopBar ?? false)
{
<div id="topBar">
</div>
}
Action inside your Controller:
public class MyAwesomeController : Controller
{
public ActionResult About()
{
ViewBag.ShowTopBar = true;
return View();
}
}
There are two options:
1. Add an ID to every body element
You could add an ID to the body of each of your pages that contains for example the Controller and Action name and then add a CSS rule to hide the topBar element on the about page.
First, let's create two string variables for the controller and action name. Do this in your _Layout.cshtml:
#{
string controller = ViewContext.RouteData.Values["controller"].ToString();
string action = ViewContext.RouteData.Values["action"].ToString();
}
Next, add the ID to the body:
<body id="#controller-#action">
In your css, you can now add a rule to hide the topbar in the about page (assuming the controller is called HomeController):
#Home-About #topBar {display:none;}
You could also use an extension method to get the controller and action name. For example something like this.
2. Use jQuery on the About page
You could add a Javascript on your about page and use jQuery to hide the topbar (I assume jQuery is already loaded):
<script>
$("#topBar").hide();
</script>
Easier way, just did that: style your page individually:
<style>
#showcase { display: none; }
</style>
Put this on the page that you want to hide, showcase is my section id. ;)
I need to refresh a partial view which defined in main view from another partial view. Is that possible.
----MainView.cshtml
{
<div id=1>
#Html.Partial("partial1", Model)
</div>
<div id=2>
#Html.Partial("partial2", Model)
</div>
}
---Partial1.cshtml
{
when i click a button, i want to refreh div#2
}
You can use jQuery to refresh the div2 on click.
1) You can bind the click event and perform some action.
e.g. $("#button1").click(function(){
/// Code to refresh div 2
}
)
2) You can raise an event and to the work in registered event.
I have 2 separate solutions. I want to load one of project#1's content from its view in an iframe in project#2. The problem is inside the iframe, it also includes everything in its layout view (the header/footer,etc)
How can I load just the view? (while still using its controller) in the iframe?
If you don't need the layouts then you have to return partial views from those controller actions.
Ex.
return PartialView("ViewName");
In your _Layout view You can generate target link with your IFrame like:-
<li>#Html.ActionLink("Contact", "Contact", "Home", null, new {target ="MainiFrame"})</li>
and in your Content section (in _Layout view) like:-
<section class="content-wrapper main-content clear-fix">
#RenderBody()
<iframe name="MainiFrame" src="" width="920" height="1000" frameborder="0"></iframe>
</section>
Then any view that you like to display in your IFrame you can write the following code in the upper corner of that view.
#model YourProgramName.YourModelClass
#{
Layout = null;
ViewBag.Title = "Your View Title";
}
#* Rest of your codes and mark ups.......... *#
Telling that your view not to use the default Layout, other wise your view will load all of your _Layout elements like menus, banners etc.
Enjoy.
I am new to MVC3 and Razor.
I have an "attention banner" on the master page as a Partial View that I want to "acknowledge" with a click on a link to close the banner (without reloading the page). I believe I need to use jQuery and an Ajax call, but I just can't seem to find the right combination.
Here is part of my _Layout.cshtml:
<section id="main">
<span id="attentionBar">#{ Html.RenderPartial("_AttentionBarPartial"); }</span>
#RenderBody()
</section>
This is my Partial View (just using Session as a shortcut for now to get it to work). I'm not sure what to use as the "link" to reload the view:
#{ this.Layout = null;}
#if(! String.IsNullOrWhiteSpace(#Session["Attention"].ToString()))
{
<div class="attentionPanel">
<span class="attentionLabel">Attention</span>
#Session["Attention"].ToString()
<span class="attentionLabel">
#* WHAT DO I PUT HERE *#
#Ajax.ActionLink("X", "AcknowledgeAttentionBar", "Home", new AjaxOptions{ UpdateTargetId="attentionPanel", InsertionMode=InsertionMode.Replace })
</span>
</div>
}
Here is my Home controller. Again, I am not sure that the code is quite correct, but essentially I will clear out the condition that shows the attention banner.
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Home Controller Updated At " + DateTime.Now.ToLongDateString()
+ " " + DateTime.Now.ToLongTimeString();
return View();
}
public PartialViewResult AcknowledgeAttentionBar()
{
Session["Attention"] = String.Empty;
return PartialView("_AttentionBarPartial");
}
}
2 things:
Make sure you have included the jquery.unobtrusive-ajax.js script to your page in order for Ajax.ActionLink helper to work and send an AJAX request when the link is clicked instead of a normal redirect:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
In your AjaxOptions you have specified UpdateTargetId="attentionPanel" but there's no element in your markup with id="attentionPanel". You have a div with class="attentionPanel" but that's not the same thing. On the other hand you have wrapped your banner in a <span id="attentionBar">, so you probably meant UpdateTargetId="attentionBar".