Is it possible for a partial view to have a layout so that whenever the partial is rendered - it is rendered with its own layout ?
Yes you can have a layout for a partial, just make sure your layout is not defining the header and the body sections of your html (because it's for a partial).
here is a sample:
_partialViewLayout.cshtml
<div class="partial-view-container">
#RenderSection("partialViewContent", true)
</div>
partialView.cshtml
#{
Layout = "~/_partialViewLayout.cshtml";
}
#section partialViewContent {
<div></div>
}
Related
I have a View MyView.cshtml with the following content:
#using MyProject.ViewModels
#model MyProject.ViewModels.MyViewViewModel
<form asp-action="Test" method="Post">
<component type="typeof(MyProject.Views.Home.Test)" render-mode="ServerPrerendered" />
<input type="submit" value="send"/>
</form>
And I have the Razor Component Test.razor with the following content (with Blazor Syntax):
#page "/Test"
<div class="form-group top-buffer #Visible">
<div class="row">
<div class="col-2">
<label asp-for="TestName" class="control-label"></label>
</div>
<div class="col-3">
<input asp-for="TestName" class="form-control" />
<span asp-validation-for="TestName" class="text-danger"></span>
</div>
</div>
</div>
<button #onclick="Show">Show</button>
#code {
public string Visible { get; set; } = "hidden";
protected async Task Show()
{
Visible = "";
}
}
The Class MyViewViewModel would look like this:
namespace MyProject.ViewModels
{
public class MyViewViewModel
{
[Display(Name = "Test Name:")]
public string TestName { get; set; }
}
}
Works all pretty fine so far. However I now want to use this component as part of a Web form which will be sent to the controller after submission. That's why I need to access and change properties of my ViewModel 'MyViewViewModel'. Unfortunately I did not find any answer in the internet on how to do that. I can't use #model MyProject.ViewModels.MyViewViewModel like in the view because this will give me a compilation error. I wonder if I need to use #inject, but if yes, I don't know how...
(parts are used from this example: https://jonhilton.net/use-blazor-in-existing-app/)
When you mix Blazor in a Razor Page, you can do the following:
Render a Razor Component
Interact with a Razor Component
Pass a Razor Component values
Please keep in mind that you are dealing with two different life-cycles. So if you do work inside of a Razor Component, the component will update but not effect the Razor Page it is hosted inside of. So mixing Razor Components and Pages with forms would be difficult.
More specifically to the OP. To pass data from your ViewModel to the component you may use the following method.
#using MyProject.ViewModels
#model MyProject.ViewModels.MyViewViewModel
<form asp-action="Test" method="Post">
<component type="typeof(MyProject.Views.Home.Test)"
render-mode="ServerPrerendered"
param-Name="#Model.TestName"/>
<input type="submit" value="send"/>
</form>
Test.razor
<h3>HelloWorld</h3>
Hello #Name
#code {
[Parameter]
public string Name { get; set; } = "undefined";
}
About life cycles
Basically when you have a button in Blazor, it will trigger an event which causes the component to re-render. You could imagine it like an iframe, or update-panel. When you have a button in a Razor page, it does a HTTP call round trip and reloads the page entirely. There is no event system in place to tell Blazor to invoke an HTTP call round trip to refresh the Razor page's content and vise versa. You can only one-way data-bind from Razor pages to Blazor, think write-only, and only when the page loads.
To hopefully add to the info. With a ASP.Net Core MVC project host Blazor webassembly, I was trying to pass a viewmodel into a razor component using this code in my view cshtml file:
<component Type="typeof(Leave)" render-mode="WebAssembly" model="new { model = (MyViewModel)#Model})"/>
But it would fail to render the razor component if I tried to access data in the viewmodel from the razor component with an Object not set exception. I think it was accessing the data before the view model has been initialized. Maybe if I set a default value this could avoided?
I found by using this instead I was able to get it working.
#(await Html.RenderComponentAsync<Leave>(RenderMode.WebAssembly,new { model = (MyViewModel)#Model}))
Edit
Seems you also need to register the viewModel class in the services in the Blazor WASM project in the Program.cs file.
builder.Services.AddScoped(sp => new HttpClient {BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<MyViewModel,MyViewModel>(); // <= add this line
await builder.Build().RunAsync();`
Without that I would get an error saying the property could not be found.
Hopefully this saves someone else some time :-)
Im not sure if this is the right approach to do this. In my searchs only found multiple partial views and one submit button but not in a layout.
I have tree different views each with their own model with the same _ViewStart.cshtml -> _Layout.cshtml (MVC convention). This is the control for the first one:
[Authorize]
public ActionResult UpDateData1 ()
{
return View();
}
[HttpPost]
public ActionResult UpDateData1(Data1Model model)
{
if (ModelState.IsValid)
{
SOME CODE…
}
else
{
ModelState.AddModelError…
}
return View(model);
The 3 views are pretty generics, but I don't want a submit button in there.
Also in _Layout.cshtml I have a partial view with common validation code for the 3 views:
<section id="main">
#RenderBody()
<div>
#Html.Partial("_CommonValidation ", new store.Models.CommonValidation())
</div>
<div>
<input type="submit" value="Only one Button" />
</div>
<div>
#Html.ActionLink("BackTo…", "MyAccountConfig", "Account")
</div>
</section>
I don’t want a submit button in _CommonValidation view neither.
It is possible to use "ONLY ONE BUTTON” submit button in the Layout.cshtml to validate the models of the partial _CommonValidation and the RenderBody() views ? it is a good practice to include strongly typed partial views in the _Layout.cshtml view? I'm new to MVC 3 so I don’t have any idea what direction to take… JavaScripts, HTML Helpers maybe...
Thanks
How to add Custom Controls in razor view in mvc 4
There is a project requirement to add custom control in razor view in mvc4 but i am unable to do it. So need help
Is there any possibility to add custom controls in razor view mvc4. If yes then how is it possible
I'm not sure what you meant by controls but you could use Html Helpers:
#helper ProductListing(List<Product> products) {
<ul id="products">
#foreach(var p in products) {
<li>#p.Name ($#p.Price)</li>
}
</ul>
}
<div>
#ProductListing(Model.Products)
</div>
See this post written by Scott Gu: http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx
I'm new to MVC (MVC3) so not sure about the best way to implement this.
I want to create a single "main" view (not strongly-typed). This "main" view will contain multiple strongly-typed partial views that each contain a form. Each partial view will therefore post back to their own POST action that does whatever. The problem I see is that when a partial view posts back, it needs to only update the partial view itself and not affect the other partial views on the page.
When I postback from a partial view now, it just returns the partial view alone back, rather than the entire "main" page.
How can this functionality be achieved in MVC3? (from a high-level perspective)
Thanks
You can post data by AJAX.
In my example I use jQuery:
<div id="first-form" class="form-container">
#Html.Partial("FirstPartial")
</div>
<div id="second-form" class="form-container">
#Html.Partial("SecondPartial")
</div>
// and here go rest forms
Your partial view may be following:
#model YourModelClass
#using (Html.BeginForm())
{
// some fields go there
}
<input type="button" value="Save Form Data" class="save-button"/>
Js would be following:
$("input.save-button").on("click", function () {
var button = $(this);
var container = button.closest("div.form-container");
var url = container.find("form").attr("action");
container.busy($.post(url, function (response) {
container.html(response);
}));
return false;
});
Suppose I have index.cshtml
#{
ViewBag.Title = "Index";
}
#model SomeModel
#section JS{
content1
content2
content3
}
<div> View Content </div>
Is there any way I could have a controller action that would serve ONLY the section JS for a request for index.js?
Such that navigating to http://somesite/index.js would return
content1
content2
content3
Edit: Some further thoughts on this. My goal would be along the lines say creating a layout page that requires a JS section programmatically, and then composing the View to that layout page and then returning the results of this.
Psuedo code example:
var layout = new LayoutPage();
layout.DefineSection("JS", required: true);
layout.Compose(View("index"))
return layout;
I'm not set on achieving that with what I described but I feel that might offer some more insight on what I'd like to achieve.
You can do something like this (but you'd have to write your own controller action to do it properly)
Index.cshml
#model MvcApplication1.Models.TestModel
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
#section JS {
blahblahblah
}
JSLayout:
#RenderSection("JS")
Your controller Action
public ActionResult Index() {
return View("Index", "_JSLayout", yourModel);
}
This will output only the JS section. If you want to do it programatically then it will take a bit.
The only way to do it would be to make the content of that section into a partial view, and return the partial view from the controller action.