I tried to use 2 partial views under 1 view/page - first half page for search filters & 2nd half page for table display. Its working also,but the issue is the white color content panel is in fixed size. i.e., if my table got data it comes out of the white color panel.
<section class="content admin_table">
#RenderBody()
</section>
I use above class in Layout. In Index View, I render both Partial views. My code part is below
#Html.Partial("_view1", Model.Filter)
#Html.Partial("_view2", Model.Result)
My IndexPage
#model SW.Web.ViewModels.CommonVM
#{
Layout = "~/Views/Shared/_Layout1.cshtml";
ViewBag.Title = "Title";
ViewBag.Header = "Details";
}
<link href="~/Content2/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" />
<!DOCTYPE html>
#section JavaScript{
<Script> .....</script>
<Script> .....</script>
}
#Html.Partial("_view1", Model.Filter)
#Html.Partial("_view2", Model.Result)
and My Partial view 1
#model SW.Web.ViewModels.viewmodel1
#{
using (Html.BeginForm("Index", "Details", FormMethod.Post, new { d= Model }))
{
#Html.ValidationSummary(true)
<div>.....Design</div>
}
and my partial view 2
#model IEnumerable<SW.Web.ViewModels.Viewmodel2>
#{
<div> Designs for partial view 2</div>
}
I understand this is over a year old but just in case someone stumbles across this post.
RenderPartialView is written like the following:
#{#Html.RenderPartial("_yourPartial", yourModel)}
So create One view with
Search partial view like
//Serach view
<div class="white">
<h2>Search view</h2>
<--! search coading-->
#Html.RenderPartial("Table_View", objectvalue2);
</div>
Use below line
#Html.RenderPartial("_SearchView", objectvalue1);
in another page
by controller action
#Html.Action("action1", "Controller", new { id = Model.idOfPart1 })
#Html.Action("action2", "Controller", new { id = Model.idOfPart2 })
by rendering view
# Html.Render ("ParialView1", Model.model1)
# Html.Render ("PartialView2", Model.model2)
Related
I have a partial view which renders a visual form made entirely in HTML with some .css. What I want to do is reuse this same form in the same page [n] number of times. In my HomeController class I am instantiating the model as such:
public IActionResult Index()
{
List<Foo> foos = new List<Foo>();
foos.Add(new Foo { Name = "John" });
foos.Add(new Foo { Name = "Dave" });
foos.Add(new Foo { Name = "Sean" });
foos.Add(new Foo { Name = "Alan" });
return View(foos);
}
Then in my index.cshtml I am iterating using the list I receive from my controller and generating a partial view based on the length of my list
#model List<HelloWorld.Models.Foo>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Foo</title>
<link rel="stylesheet" href="~/foo/styles.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="~/foo/FooActions.js"></script>
</head>
<body>
#{
foreach (Foo foo in Model)
{
ViewData["Name"] = foo.Name;
<partial name="_Foo" view-data="ViewData" />
}
}
</body>
</html>
This is how I have my partial view set up:
<script type="text/javascript">
init('#ViewBag.Name');
</script>
<div class="foo-background">
<section>
<div>
<span class="score-text" id="redText">0</span>
</div>
<div class="green-bar"></div>
<div class="red-bar"></div>
<div>
<span class="bonus-score-text" id="greenText">0</span>
</div>
</section>
<section>
<div class="alphanumeric-display">
<p class="alphanumeric-display-text" id="textLine1">Text</p>
<p class="alphanumeric-display-text" id="textLine2">Text</p>
<p class="alphanumeric-display-text" id="textLine3">Text</p>
</div>
<div>
<span class="person-grade-text" id="goldText">0</span>
</div>
</section>
</div>
This form pulls data from a local database and displays data based on the person its tied to. The data shows up fine if its only displaying data of one person in the page. I'm using JavaScript to grab either the class or the id of these html elements and update their respective data.
But now what its doing is showing all the forms side-by-side, only, the data is wrong. None of the forms show the data from the table as they appear in the database. Upon closer inspection looks like it has a problem where each of these forms cant have the same class or ids. I'm getting this in error in all places where I have class or id elements
id attribute value must be unique: Document has multiple static
elements with the same id attribute: textLine1
Its the same error for each of my html elements.
Can someone help me understand what I am doing wrong? What can I do in order to get this to work properly?
I have a few blocks with lists of input on my site
<div id="MainClaimsBlock">
#await Html.PartialAsync("UserClaimsBlock", Model.FirstClaimModel)
#await Html.PartialAsync("UserClaimsBlock", Model.SecondClaimModel)
#await Html.PartialAsync("UserClaimsBlock", Model.ThirdClaimModel)
#await Html.PartialAsync("UserClaimsBlock", Model.FourthClaimModel)
</div>
And inside every partial view I have something like that (100+ lines in orig.)
for (var i = 0; i < Model.Length; i++)
{
<div class="custom-control custom-switch">
<input type="checkbox" asp-for="#Model.Categories[i].Selected">
<label asp-for="#Model.Categories[i].Selected">#Model.Categories[i].Name</label>
</div>
}
The problem is that I can't save values from these partial views because asp-for gives dublicated id and for properties for lists from partial views.
id="Model_SubCategories_6__Selected"
How do you distinguish the Id of one partial view from another?
Wow, solution was found quite fast from the question by Chris Pratt
The solution is to use ViewDataDictionary before calling partial view
#{
var myViewData = new ViewDataDictionary(ViewData);
myViewData.TemplateInfo.HtmlFieldPrefix = "Claims";
}
#await Html.PartialAsync("UserClaimsBlock", Model.SecondClaimModel, myViewData)
And after that asp-for tag returned id based on this prefix
id="Claims_Categories_2__Selected"
I go to a View, submit data via POST, but the redirect cannot find the Controller method. What am I doing wrong here? After submitting the form I get:
404 error: cannot find page. URL is: http://localhost:52008/InternalController/UpdateCardFormPost
Snippet from InternalController.cs:
public ActionResult UpdateCardFormView()
{
var CardToUpdate = new CardView();
return View(CardToUpdate);//return implementation of Cards.cshtml with the empty model that was passed to it
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UpdateCardFormPost(CardView c)
{
CardModelIO.WriteCard(c);//#TODO: IMPLEMENT
return View("CardDetailView", c);
}
UpdateCardFormView.cshtml (the view with the form I am submitting):
#using LeanKit.API.Client.Library.TransferObjects
#model CardView
<!DOCTYPE html>
<html>
<!--Form used to change a card
STARTING DISPLAY called by in Internal/UpdateCardFormView
ENDING DISPLAY (post) called by UpdateCardForm in InternalController a specified below-->
<head>
</head>
<body>
#Html.BeginForm("UpdateCardFormPost", "InternalController", FormMethod.Post)
#Html.TextBoxFor(c => c.AssignedUserName);
<input type="submit" value="Submit Changes" />
</body>
</html>
Heres the CardDetailView.cshtml (the view I should be redirected to):
#using LeanKit.API.Client.Library.TransferObjects
#model IEnumerable<CardView>
<!--used for displaying an individual card in detail view
referenced in UpdateCardFormPost() method of Internal controller-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
CardView j = Model;
<p>j.AssignedUserId</p>
</body>
</html>
You've specified the controller name as InternalController but it's probably just called "Internal".
Try changing
#Html.BeginForm("UpdateCardFormPost", "InternalController", FormMethod.Post)
to
#Html.BeginForm("UpdateCardFormPost", "Internal", FormMethod.Post)
you are missing closing form tag
you should do it like
using (#Html.BeginForm("UpdateCardFormPost", "InternalController", FormMethod.Post))
{
...
}
#using(Html.BeginForm())
{
#Html.TextBoxFor(c => c.AssignedUserName);
<input type="submit" value="Submit Changes" />
}
I believe I'm missing something quite trivial here, but I'm not spotting it. I have a Post method, which modifies a Model property. I then want that model property to reflect the new property value. So here are the pieces:
Controller:
[HttpPost]
public ActionResult Index(HomeModel model)
{
ModelState.Clear(); //Didn't help
model.MyValue = "Hello this is a different value";
return View(model);
}
Model:
public class HomeModel
{
[Display(Name = "My Message")]
public string MyValue { get; set; }
}
View:
#model MyApp.Models.HomeModel
#{
ViewBag.Title = "My MVC App";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
#using (Html.BeginForm("Index", "Home"))
{
<h5>Hello</h5>
<input id="SendMessage" type="submit" value="Send Message"/>
#Html.LabelFor(m => m.MyValue)
}
</div>
</body>
</html>
When I debug the controller I can see the updated model, but my LabelFor always has the Display attribute as opposed to the value I provided of "Hello this is a different value". What am I missing here that this label is not updated?
#Html.LabelFor displays your property name (or the name defined in your DisplayAttribute), whereas #Html.DisplayFor displays your property content. If your want "Hello this is a different value" displays, replace #Html.LabelFor by #Html.DisplayFor
The html helper look at the ModelState when binding their values and then in the model.
So if you intend to modify any of the POSTed values inside your controller action make sure you remove them from the model state first:
ModelState.Remove("PropertyName");
Read this MVC 3 - Html.EditorFor seems to cache old values after $.ajax call
That's the purpose of LabelFor, display the property name. Either use EditorFor or just access the model property directly inside a label tag it to your view
<h5>Hello</h5>
<input id="SendMessage" type="submit" value="Send Message"/>
<label>#Model.MyValue</label>
Problem is : I do have Index.cshtml as
#{
ViewBag.Title = "Search";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="#Url.Content("../../Scripts/jquery.unobtrusive-ajax.min.js") type="text/javascript"></script>
<h2>Answer's are </h2>
<div id="result">
#Ajax.ActionLink("Search Wiki",
"WikiAns",
new AjaxOptions{
UpdateTargetId = "result",
InsertionMode=InsertionMode.Replace,
HttpMethod="GET",
LoadingElementId="progress"
})
</div>
<div id="progress" style="display: none">
<img src="#Url.Content("../../Content/Images/ajax-loader.gif")" alt="loader" />
</div>
Now i do have partial view model _WikiAns:
#model IEnumerable<Questions.Models.WikiAnsClass>
<h2>Our Links</h2>
<table>
#foreach (var item in Model) {
<tr>
<td>
#item.content
</td>
</tr>
}
</table>
Now using above i want is that...on clicking Search Wiki action link, id="result" get all partial view rendered in it. But its not happening. Instead of its going to a page "localhost:80/Search/WikiAns" and showing the result there. but i want to it to stay at localhost:80/Search and replace its "result" id. but its not working this way.
Here is my action called WikiAns
public ActionResult WikiAns()
{
//Code to follow...
var wikians = //code to follow
return PartialView("_wikiAns", wikians);
}
What's the problem ?
Also how can i implement this Ajax GIF loader...i mean showing it while action gets executed. ?
Please suggest
Thanks
#Pbirkoff may be right about this but you can go through my post of very easy to implement demo of your scenario and build it up from there.
http://mazharkaunain.blogspot.com/2011/05/aspnet-mvc-razor-render-partial-view.html
http://mazharkaunain.blogspot.com/2011/04/aspnet-mvc-render-partial-view-using.html
You need to include Microsoft Ajax scripts at your page or layout.