We Keep Coding

How to use RedirectToAction to redirecto to a position in the page?

I am using MVC4, C# and visual studio ultimate 2013 in a project.
I am redirecting a user to an index page after submiting a form. However, this webpage has 2 tabs, and I want to redirect the user to the second tab, instead of the first one.
I have a Controller called Material, with an Index action, which sends the user to the Index View.
public ActionResult Index()
{
return View();
}
This View is made of two partial Views, _Materials and _Packages.
#{
ViewBag.Title = "Index";
}
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Materials</li>
<li>Packages</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="Materials">
#Html.Action("Materials", "Material")
</div>
<div class="tab-pane" id="Packages">
#Html.Action("Packages", "Package")
</div>
</div>
</div>
After performing a serie of actions in another section of the application, I which to redirect the user to the /Material page, to the second tab, but I have no idea how to do it !
Currently I am using this code, which always redirects to the first tab:
return RedirectToAction("Index", "Material");
How can I fix my problem?

You can't use something like RedirectToAction because it does not have any capability of appending a URL fragment. What you can do is use something like Redirect which just takes a URL string, and then use the URL helper to still dynamically generate the action URL for you:
return Redirect(Url.Action("Index", "Material") + "#Package");
In other words, Url.Action will generate the main URL for you and return it as a string. You can then append the fragment to this string before finally redirecting.

You'll want to use the
Redirect method
Redirect("www.sitename.com/material/index#Package");
or
string fragment = "Package";
Redirect("www.sitename.com/material/index#" + fragment);
The #Package is what is called a Fragment Identifier, that will focus your browser on the part of the page with the id of Package.

You can simply write an Ajax call to pass to the controller and in case of success, append #tab to the url parameter. for example use this:

Render page from view via javascript

I want to render the page when i click on particular div.
For that i written div as:
<div id="idFlip" onclick="javascript:renderPages();">
-----------content---------------------
</div>
written javascript function as:
function renderPages()
{
alert("Inside");
#RenderPage("~/Views/PP/Teacher_Observation.cshtml");
}
But its showing me that page while the page itself is load.(i.e. showing me both views current one and Teacher_Observation.cshtml
Its not showing me on div click.
What can i do???
Please help me.
I want to render page on click of div through javascript function

You could render the view on page load inside of a hidden div e.g:
<div id="idFlip">
<div id="i-am-the-view" style="display:none">
I am some hidden content
</div>
</div>
And then in Javascript/jQuery:
$(document).ready(function(){
$('#idFlip').click(function(){
$('#i-am-the-view').toggle();
});
});

onClick bind to Url.ActionLink only works first time

So I have a Url.ActionLink, that when clicked, I want to load a partial view into a modal. This works the first time, but the second time it redirects the browser to the partial view instead of loading it into a modal, and the modal() call has an error saying that it is undefined.
The html for the div is:
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="modalBody"></div>
</div>
</div>
</div>
The code for the binding/loading so far is:
$(".actionLink").on("click", function (e) {
e.preventDefault();
$("#modalBody").load(e.target.href);
$("#modal").modal('show');
return false;
});
The error that I'm getting before the redirect is on the $("#modalBody").load(e.target.href); and the error is "Uncaught TypeError: undefined is not a function." It works the first time a link is clicked, so I don't know why it would be undefined the second time.

The .on() type of binding works only with the elements which was created before the script has been initialised.
So if you load some content dynamically in the on click function, the on() binding won't work for that content.
One solution could be if you bind the click event to the container element, where you load the new content, something like this:
$("#container").on("click", ".actionLink", function(e) { ... });
"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()"
jQuery .on() doc

Showing jQuery Modal on form data sucessfully submited to database

I am facing a problem with jquery modal Dialog box. I want the modal box to show only when my data is successful saved to database. I am using c# and asp.net, and on backend i am using Sql server 2008 R2. Currently my data is successfully entering and i am showing "the data is successfully saved on a label" after clicking on a button , but i want to show a modal box only when i click the button and my data is saved .
I have created this script
$("#Btndiag").click(function () { $("#myModal").modal(); });
and on content page body i have written this
<asp:Button ID="Btndiag" runat="server" Text="show dialog" onclick="Btndiag_Click1" />
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
<p>Here settings can be configured...</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>

To achieve what you want, you have to process the data in the back end, and then have the ASP.NET Framework execute a script for you.
To accomplish this, you use ClientScriptManager.RegisterClientScriptBlock during full page postbacks, or ScriptManager.RegisterClientScriptBlock if the controls are inside of an UpdatePanel.
C# code:
protected void Btndiag_Click1(object sender, EventArgs e)
{
// process database
// verify results
if (success)
{
ClientScriptManager.RegisterClientScriptBlock(this, "Btndiag_Click1", "$('#myModal').modal();", true);
}
}
Remember that if the button and the modal div are inside of an UpdatePanel, replace ClientScriptManager.RegisterClientScriptBlock with ScriptManager.RegisterClientScriptBlock.
Finally, just as a last informational note...your script ($("#Btndiag").click(...)) will not work because ASP.NET changes element Ids when rendered as HTML.
You'd have to work it in the following manner:
$("#<%= Btndiag.ClientID %>").click(function () { $("#myModal").modal(); });
Please note that you do not need to do anything with the button's click event. You want the framework to automatically run your scrip after the postback.

MVC2 C#: How can I populate a contentplaceholder with html from a file?

So.. The issue I have came across is I am migrating a client's web app to MVC2, and the original method for displaying html content is not capable of working with MVC so I am needing to update it. The functionality I need is like so: There is a side nav that will contain the actions, and say the user clicks on "FooBar" it will populate the "mainContent" placeholder with the "FooBar.html" file from a document directory. I would like to do this with no postbacks as well if it is possible. Any ideas?

You may use jQuery ajax to load the pages when user clicks on the link. load() function will be ideal here.
It is just HTML and javascript. Nothing specific to ASP.NET MVC
//Include jQuery library
<div>
<a href="Home/about" class="aLink" >About</a>
<a href="Home/FAQ" class="aLink" >FAQ</a>
<a href="Home/Contact" class="aLink" >Contact</a>
</div>
<div id="mainContent">
</div>
<script type="text/javascript">
$(function(){
$("a.aLink").click(function(e){
e.preventDefault(); // prevent the default navigation behaviour
$("#mainContent").load($(this).attr("href"));
});
});
</script>