I have a PartialView, that contains grid. The grid has a list of files that can be deleted. After user deletes the file I return PartialView with new file list.
Issue:
The new screen contains ONLY the PartialView. The MenuItems and all other things on the page are NOT rendered.
Any help highly appreciated. Thank you...
MY code:
Sellers.cshtml
'ACSDemoWinAzureACS.Models.SellersModel
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<div id="gridContainer">
#Html.Partial("_AdminView", Model)
</div>
'
_AdminView.cshtml - The PartialView
#model ACSDemoWinAzureACS.Models.HomeModel
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<div id="gridMain">
#using (Html.BeginForm("Admin", "Home", new { enctype = "multipart/form-data" }))
{
foreach(var file in Model.files)
{
<tr>
<td> #file.FileName</td>
<td>#Ajax.ActionLink("Delete" , "Delete" , "Home",
new { id = file.FileName },
new AjaxOptions
{
UpdateTargetId="gridMain", // <-- DOM element ID to update
InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
HttpMethod = "GET" // <-- HTTP method
})
</td>
</tr>
}
}
</div>
HOmeController.cs
public PartialViewResult Delete(string id)
{
_model.Delete(id);
_model.files = _model.GetFiles();
return PartialView("_AdminView",_model);
}
Related
I am trying to use Ajax.Actionlink to render a partial view. But it only redirects me to the partial view. I also added: <add key="UnobtrusiveJavaScriptEnabled" value="true" /> to webconfig. Anyone?
My layout.cshtml Scripts.render and script is in head tag. Ajax.actionlink and div is in body
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/Scripts/jqueries")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#Ajax.ActionLink("Ajax Click", "Document","Home", new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace })
<div id="result">
</div>
Home controller:
public PartialViewResult Document()
{
return PartialView("Document", om);
}
My Document.cshtml
#model mymodel
#foreach (var item in Model)
{
<li>#Html.ActionLink(item.something, "Controller", "Action")</li>
}
Your jquery and unobtrusive-ajax should be at the bottom of the page, like this
</footer>
#Scripts.Render("~/bundles/jquery")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Information why can be found here
http://developer.yahoo.com/performance/rules.html/
Placing this at the wrong place, WILL result in errors
I have a simple application on mvc3 with razor before i Open the dialog I tried to open an "alert" and it works correctly so function its working on the event but when i comment this alert and
try to open the dialog it just does not work
#model MvcApplication1.Models.LogOnModel
#{
ViewBag.Title = "Create";
}
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#contactForm').submit(function (e) {
//alert("entro a funcion");
e.preventDefault();
$('#dialog').dialog('open');
});
});
</script>
#using (Html.BeginForm("Index", "Infracciones", FormMethod.Post, new { id = "contactForm"}))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Infraccion</legend>
</fieldset>
<p>
<input value="Guardar" type="submit" name = "button"/>
</p>
}
You only need to add this:
<div id="dialog">
In the body.
try:
$('#dialog').dialog();
instead of
$('#dialog').dialog('open');
I've used a solution here (which I've fiddled here) for restricting submission of a form until all required fields are filled.
The problem is when I run on my MVC3 project, as I've observed on Firebug, it stops starting at the third line of the following block. Because of it, the solution doesn't work.
var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
select: function(event, ui) { // Here.
// The following lines are not executed.
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
Can somebody tell me why my project won't run the rest of the script and what I should do to fix it? Thanks!
In my View file
#ModelType SLC.Models.RegisterModel
// downloaded with NuGet
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $("#myForm").validate();
console.log(validator);
var tabs = $("#tabs").tabs({
select: function (event, ui) {
var valid = false;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
$(panelId).find("input").each(function () {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
return valid;
}
});
});
</script>
<link rel="stylesheet" href="#Url.Content("~/Content/themes/base/jquery-ui.css")" />
#Using Html.BeginForm("", "", Nothing, New With {.id = "myForm"})
#Html.ValidationSummary(True, "Account creation was unsuccessful. Please correct the errors and try again.")
#<div>
<div id="tabs">
<ul>
<li>1. Information</li>
<li>2. Information</li>
<li>3. Confirm</li>
</ul>
<div id="tab-1">
// Some fields...
</div>
<div id="tab-2">
// Some fields...
</div>
<div id="tab-3">
// Some fields...
<input type="submit" value="Register" />
</div>
</div>
</div>
End Using
In my Layout template file
<head>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
// downloaded with NuGet
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.0.js")" type="text/javascript"></script>
</head>
I found this:
The jQuery UI select method, in particular, is deprecated as of 1.10.0, so it's either back to UI 1.9.2 or a code rewrite.
I am using Ajax Form in my page , I have couple of AJAX forms in the page one --(Customers.cshtml) , and the other comes as PARTIAL VIEW (_customers.cshtml). When I Submit the Partial View. This PARTIAL VIEW IS submitting multiple times**
I am using the following Ajax script in main page and also in Partial View
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"
My code follows like this :
Customers.cshtml replaces the div tag with id="customers"
---------------------------------------------------------------------
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
#if (false)
{ <script src="~/Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script> }
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Action1", "Controller1", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "customers" }))
{
#Html.AntiForgeryToken()
<input type="submit" class="t-button t-state-default"/>
}
<div id="customers"> </div>
<div id="Orders"></div>
<div id="customers> tag is replaced with a partial view which has another AJAX FORM
**_customers.cshtml replaces the div tag with id="orders"**
--------------------------------------------------------
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Action2", "Controller1", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Orders" }, new { id = "formupdate" }))
{
#Html.AntiForgeryToken()
<input type="submit" class="t-button t-state-default"/>
}
Now when I try to submit the **_customers.cshtml** , it is submitting more than once
<br/>
Controller
-----------------------------------------------
[HttpPost]
public ActionResult Action1()
{
return PartialView("_customers");
}
[HttpPost]
public ActionResult Action2()
{
return PartialView("_Shipping");
}
Use this java libraries:
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
Im having some trouble getting Ajax.ActionLink to work how I expect.
In /views/layout/_Layout.cshtml I load the following scripts
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
In /views/home/index.chstml I have
#Ajax.ActionLink("Check Status", "GetStatus", new AjaxOptions { UpdateTargetId = "status", HttpMethod = "GET", InsertionMode = InsertionMode.Replace })
<div id="status">
Status
</div>
And in controllers/HomeController I have
public string GetStatus()
{
return "Status ok " + DateTime.Now;
}
When I click the button it takes me to /home/GetStatus And displays Status Ok and the current date and time.
I expected it to simply update the Div area
So I found the solution here Weblogs.asp.net For anyone else with this problem check the page as it offers multiple fixs. I basiclly left out reference to a javascript lib.