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.
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'm creating a web application with asp.net mvc and struggling with a redirect to a mobile view after pushing a login button. i isolated the problem from the case and created a dummy controller and view
Controller:
public class DummyController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult foo()
{
return RedirectToAction("index", "home");
}
public void bar()
{
Response.Redirect("/home/index");
}
}
View:
<div>
<button>redirect to action</button>
</div>
<div>
<button>response redirect</button>
</div>
by pushing the first button (foo method) from a mobile devices the redirect does nothing
pushing the second button (bar method) the redirect works fine and delivers the expected mobile site (Index.mobile.cshtml)
is there anything i have to keep in mind when using "RedirectToAction" and mobile views?
Having a button inside and anchor is invalid HTML and as far as I know so is putting an anchor inside a button, this could be why you're seeing random behaviour. You could just have an anchor and style it like a button.
Found this http://codepen.io/lukeocom/pen/LpdKz
Buttons are normally meant to go inside forms.
From the image i try to load two controllers, on pageload Browse controller loads with 1 and 2 data from picture, when i want to select the date,it should load the dayselect controller data in same page. How can i do this , My controllers are here
public ViewResult Browse(Int32 eventid) {
//code
return view(ef);
}
public ActionResult DaySelect(EventModel m) {
return view("_Common",k);
}
My viewModel for Browse Controller is Browse.cshtml
#model BrowseEventModel
<div class="Event_Name" id="id_name">#Model.EventName</div>
<div class="Event_loc" id="id_loc">#Model.EventLocation</div>
//In this view i have a widget which i load in partial view
<div class="yui3-g" id="bottom_container"> #{Html.RenderPartial("_Common");}
</div>
The partial view is _common.cshtml
#model BrowseEventModel
<select name="dayNo" id="dayNo">
#foreach (var s in Model.Dayselector) {
<option value = "#s.DayNo"> #s.DayDate.ToString("dd MMM yyyy")</option>
}
</select>
//View Model used for both browse and dayselect controller
#foreach(var e in Model.DisplayData){
<ul id="ul-data">#e.dataName</ul>
<div id="ul-id">#e.dataid</div>
}
When i select the date it should load data in same view page is it possible,i.e injecting view on runtime
You can use AJAX to inject view at runtime. In your case, you are depending on the onchange event of a DropDownList. A question has already been asked with the same problem as yours. Try this: using ajax with dropdownlist mvc3
I have a page where i have a div element as below,
`<div id="Dailymain" runat="server" class=" sidebar" onclick="ClickDaily">
<div runat="server" id="Daily" class="sidebar_item" onclick="ClickDaily" >
<h2><a id="Daily" href="Productivity.aspx">Daily</a></h2>
<p> </p>
</div><!--close sidebar_item-->
</div>`
and in my page_load code i have this,
Weekly.Attributes["onclick"] = this.ClientScript.GetPostBackEventReference(this, "ClickWeekly");
and in IPost Back EventHandler Members interface i have this..
'if (eventArgument == "ClickWeekly")
{
Weekly_Click();
}'
but when that div element is clicked the click event function is not firing..where am i missing here.please help me...
You are trying to add the click handler to an object called Weekly - but in the markup you posted there is no element with that id.
You also have multiple elements with the same id "Daily" - id attributes should be unique.
As mentioned above, the onclick() function calls javascript - you will need to define a javascript function which causes a postback and invokes the server side function you need. Or could you implement the server side function as javascript instead?
Write a code like this
Step 1: In Page Load event
Dailymain.Attributes.Add("onclick", "return ClickDaily()")
Step 2: Define javascript event
function ClickDaily()
{
alert("call daily");
return false;
}
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;
});