How to modify HTTP Response Using Filters in MVC 3 Razor? - asp.net-mvc-3

HtML section in _Layout.cshtml
<div id="header">
<div class="logo"><img src="#Url.Content("~/!(IMAGEPATH)!/logo.png")" alt="" /></div>
<div class="fb_like"><img src="#Url.Content("~/!(IMAGEPATH)!/fb_like_btn.png")" alt="" /></div>
<div class="google_plus"><img src="#Url.Content("~/!(IMAGEPATH)!/google_plus.png")" alt="" /></div>
<div class="header_rt">
<ul>
<li>Call us: 1500 258 789</li>
<li>Live chat</li>
<li>My Account</li>
<li>Sign in</li>
</ul>
<div class="search">
<input type="text" value="Type your keyword..." class="srh_txt" />
<input name="Submit" type="submit" value="Submit" class="srh_btn" />
</div>
</div>
</div>
<div id="main">
#RenderBody()
</div>
Html section in Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<div class="clr"></div>
<div id="banner">
<div id="slider"><img src="#Url.Content("~/!(IMAGEPATH)!/banner.jpg")" alt="" /></div>
<div class="banner_rt">
<div class="adv1"><img src="#Url.Content("~/!(IMAGEPATH)!/adv1.jpg")" alt="" /></div>
<div class="adv2"><img src="#Url.Content("~/!(IMAGEPATH)!/adv2.jpg")" alt="" /></div>
</div>
Using bellow code I able to Replace !(IMAGEPATH)! only in _Layout.cshtml
void Application_PostReleaseRequestState(object sender,EventArgs e)
{
if(string.CompareOrdinal(Response.ContentType,"text/html") == 0)
{
Response.Filter = new ResponseFilter(Response.Filter);
}
}
But above described code not affecting child pages like Index.cshtml. Please tell me any event in ASP.NET MVC3 like old protected override void OnPreInit(EventArgs e) of Classic ASP.NET !!!!
I want to know which event effecting all the child pages before rendering in MVC3 ?

Within Base Controller, write the bellow code
protected override void OnResultExecuting(ResultExecutingContext filterContext)
{
var response = filterContext.HttpContext.Response;
if (string.CompareOrdinal(response.ContentType, "text/html") == 0)
{
response.Filter = new ResponseFilter(response.Filter);
}
base.OnResultExecuting(filterContext);
}

Related

Partial View rendered in modal via ajax missing javascript events

Im having issues when placing html content from partial view into modal content via ajax, not all events defined in _layout.cshtml are being attached to elements in modal content.
Setup:
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
//custom css is here.
</head>
<body>
#RenderBody()
<partial name="_Modals" /> <-- all variations of modals exist in this file
//custom javascript files <-- **this is failing to attached to modal content**
#RenderSection("CustomScriptsSection", false);
</body>
</html>
_CustomLayout.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<partial name="_SideBar" />
<main>
<partial name="_NavBar" />
<div>
#RenderBody()
<partial name="_Footer" />
</div>
</main>
#section CustomScriptsSection{
#RenderSection("Scripts", false)
}
_Viewstart.cshtml
#{
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}
The Ajax Call snippet from a standard razor view(not a page).
#section Scripts{
$('#DefaultModelBtn').on('click', function (e) {
var RegisterURLPartial = "/Home/RegisterPartial"
$('#modal-default').modal('show');
$('#modal-default').off('shown.bs.modal').on('shown.bs.modal', function () {
if ($('#PartialContainer').length) {
$('#PartialContainer').load(RegisterURLPartial, function (response, status, xhr) {
});
}
});
});
}
Controller Method for the Partial Page
public virtual IActionResult RegisterPartial() => PartialView("~/Views/Home/Partial/_Register.cshtml");
The partial Page itself (ambiguous Action, Id, and Controller names)
<form id="someId" asp-action="someAction" asp-controller="someController" method="post">
<div class="input-group input-group-outline mb-3">
<label asp-for="Name" class="form-label"></label>
<input asp-for="Name" type="text" class="form-control" autocomplete="off">
</div>
<div class="input-group input-group-outline mb-3">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" type="email" class="form-control" autocomplete="off">
</div>
<div class="input-group input-group-outline mb-3">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" type="password" class="form-control" autocomplete="off">
</div>
<div class="text-center">
<button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Sign Up</button>
</div>
</form>
What I noticed was the css is being formatted properly, but the javascript that attaches to those css class are not working, eg. focus event is missing in the modal. (input-group-outline css class is missing focus event)
No Razor Pages are used at all (#page not used).
Thanks for the help guys.

How to pass a value from foreach loop in the view to the controller in ASP.NET Core MVC?

I have a table in my view that its rows are filled by a foreach loop. A part of this table is as follows:
#foreach (var item in Model.PmModel)
{
<td>#Html.DisplayName(item.pmNumber.ToString())</td>
<td>
<button type="button" class="btn btn-info btn-table btn-modal">Upload</button>
</td>
}
I have a button in each rows and by pressing each of them, a modal form is appeared to upload a file. I use the following code to upload the file and fill database columns based on the file information. But I need to take pmId from view to the following action:
public async Task<IActionResult> UploadFile(IFormFile file)
{
if (file != null)
{
if (file.Length > 0)
{
var fileName = Path.GetFileName(file.FileName);
var fileExtension = Path.GetExtension(fileName);
var newFileName = string.Concat(Convert.ToString(Guid.NewGuid()), fileExtension);
var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/PmFiles/UploadedByUsers", newFileName);
using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}
var fileElements = new Models.FileRepository()
{
fileId = 0,
fileName = newFileName,
isDownloaded = false,
pm = _pmRepository.GetPmById(int Id), //I need to get Id from view
uploadDate = DateTime.Now,
};
_fileRepository.InsertFile(fileElements);
_fileRepository.SaveChanges();
}
}
return RedirectToAction("PmPage");
}
I use Bootstrap modal:
#section Modal{
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
dir="ltr">
<div class="modal-dialog">
<form method="post" enctype="multipart/form-data" asp-controller="Page" asp-action="UploadFile">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">File Upload</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mt-2" dir="rtl">
<label class="form-label" for="customFile">Select your file:</label>
<input type="file" name="file" class="form-control" id="customFile" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-mdb-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Upload</button>
</div>
</div>
</form>
</div>
</div>
}
In view, I can find pmId using item.pmNumber but I don't know how I can take its value to my controller. Please help me.
Update: This script triggers the modal by pressing the button.
<script type="text/javascript">
$(document).ready(function () {
$('.btn-modal').click(function () {
$('#exampleModal').modal('show');
});
});
</script>
You can add a hidden input in your modal and put the modal body in the foreach section to pass the item.pmNumber to hidden input.
Here is a working demo you could follow:
Model:
public class FileModel
{
public List<PmModel> PmModel { get; set; }
}
public class PmModel
{
public int pmNumber { get; set; }
}
View:
#model FileModel
#{
int i = 0; //add this....
}
#foreach (var item in Model.PmModel)
{
<td>#Html.DisplayName(item.pmNumber.ToString())</td>
<td> //change here....
<button type="button" data-toggle="modal" data-target="#exampleModal_#i" class="btn btn-info btn-table btn-modal">Upload</button>
</td> //change here.....
<div class="modal fade" id="exampleModal_#i" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
dir="ltr">
<div class="modal-dialog">
<form method="post" enctype="multipart/form-data" asp-controller="Page" asp-action="UploadFile">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">File Upload</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mt-2" dir="rtl">
<!--add this-->
<input hidden name="id" value="#item.pmNumber" />
</div>
<div class="row mt-2" dir="rtl">
<label class="form-label" for="customFile">Select your file:</label>
<input type="file" name="file" class="form-control" id="customFile" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-mdb-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Upload</button>
</div>
</div>
</form>
</div>
</div>
i++; //add here.........
}
#section Scripts {
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
}
Controller:
public class PageController : Controller
{
public async Task<IActionResult> UploadFile(IFormFile file,int id)
{
//do your stuff...
return View();
}
}
Besides, you can also create a partial view for modal(This partial view still needs a hidden input) to avoid looping modal body code. Refer to this answer

01/01/0001 when passing birth date to control

I want to save a register form and must save birth date in another format.
In model I have:
public DateTime BirthDate { get; set; }
In the view:
#model Univer.Model.KarApplicant
#{
ViewData["Title"] = "";
}
<div class="container MainMiddle" style="padding-top:50px;">
<hr />
<div class="row container-fluid">
<div class="col-md-10">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger">
</div>
<div class="form-row">
....
<div class="form-group col-md-4">
<label asp-for="BirthDate" class="control-label"></label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
</div>
<input asp-for="BirthDate" class="form-control example1" data-val="false" />
<span asp-validation-for="BirthDate" class="text-danger"></span>
</div>
</div>
</div>
....
<div class="form-row">
</div>
<div class="form-group float-left">
<input type="submit" value="next" class="btn btn-lg btn-primary btn-block" />
</div>
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/lib/persian-date/persian-date.js"></script>
<script src="~/lib/persian-datepicker/js/persian-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".example1").pDatepicker();
});
</script>
}
When I click on Submit button and send data to action of controller, with breakpoint check form value that pass to controller, birth dates value that are passed to controller is 01/01/0001 but I have value in persian mode in input in view.
My question is: why when set value with javascript in input and send to controller the value doesn't get sent?
UPDATE: after the comment i Added this code
public void ConfigureServices(IServiceCollection services)
{
services.Configure<RequestLocalizationOptions>(options =>
{
options.DefaultRequestCulture = new RequestCulture("fa-IR");
}); .....
}
and
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{....
app.UseRequestLocalization();
app.UseMvc()....
}

create a html helper for mvc

I am new to mvc so not sure if this is possible.
I have some html that basically uses some images to create a nice looking rounded corners box.
Is it possible in mvc3 to create a helper function that will allow me to call the helper and insert any content I want into the main area of the div tags.
this is my html
<div class="rounded">
<div class="top">
<div class="right">
</div>
</div>
<div class="middle">
<div class="right">
<div class="content">
Some how allow me to insert data into here
<div class="Clear">
</div>
</div>
</div>
<div class="bottom">
<div class="right">
</div>
</div>
</div>
</div>
I dont want to have to copy this everywhere I want to use this styling so I am hoping I can create some type of helper and call it whenever I need to use this box and allow me to insert html into
<div class="content">
Some how allow me to insert data into here
<div class="Clear">
</div>
Does anyone have any suggestions?
Thank you
Seems like an excellent scenario for a custom html helper:
public class RoundedCorner : IDisposable
{
private readonly ViewContext _viewContext;
private bool _disposed = false;
public RoundedCorner(ViewContext viewContext)
{
_viewContext = viewContext;
}
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
protected virtual void Dispose(bool disposing)
{
if (!_disposed)
{
_disposed = true;
_viewContext.Writer.Write(
#"<div class=""Clear"">
</div>
</div>
</div>
<div class=""bottom"">
<div class=""right"">
</div>
</div>
</div>
</div>"
);
}
}
}
public static class HtmlExtensions
{
public static RoundedCorner RoundedCorner(this HtmlHelper htmlHelper)
{
htmlHelper.ViewContext.Writer.Write(
#"<div class=""rounded"">
<div class=""top"">
<div class=""right"">
</div>
</div>
<div class=""middle"">
<div class=""right"">
<div class=""content"">"
);
return new RoundedCorner(htmlHelper.ViewContext);
}
}
and in your view simply:
#using (Html.RoundedCorner())
{
<div>Some how allow me to insert data into here</div>
}
which would generate (I know, what an ugly formatting but perfectly valid HTML, I am too lazy to fix it at the moment):
<div class="rounded">
<div class="top">
<div class="right">
</div>
</div>
<div class="middle">
<div class="right">
<div class="content"> <div>Some how allow me to insert data into here</div>
<div class="Clear">
</div>
</div>
</div>
<div class="bottom">
<div class="right">
</div>
</div>
</div>
</div>
I like the solution above provided by Darin. The only changes I would make is to have two private methods in the RoundedCorner class that write the opening and closing tags to the view context, rather than having part of it in the class and the other part in the helper. Then the helper just returns a new instance of RoundedCorner.

layout difficulty in MVC3

I am having a login page. In the login Page I don`t have any menu and based upon the user login a menu appear on the Home page.
My problem is how not to display the menu only in my login page?
I am having a page MenuControlPartial.cshtml as follows for the menu:
<li>Admin
<ul>
<li>TimeKeeper</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
<li>Settings
<ul>
<li>VV</li>
<li>XX</li>
</ul>
</li>
</ul>
My _layout.cshtml is as as follows:
<div id="page">
<div id="header">
<div id="title">
<br />
</div>
#if (Request.IsAuthenticated)
{
<div id="loginInfo">
#Html.Partial("_LogOnPartial")
</div>
<div class="clear">
</div>
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
<div class="clear"></div>
}
</div>
<div id="content">
#RenderBody()
</div>
</div>
}
</body>
You could test the current controller and action
#if (!(Html.ViewContext.RouteData.GetRequiredString("controller") == "Login" && Html.ViewContext.RouteData.GetRequiredString("action") == "Index")) {
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
}
And to avoid this ugliness write a helper:
public static bool ShouldDisplayMenu(this HtmlHelper htmlHelper)
{
var routeData = htmlHelper.ViewContext.RouteData;
var controller = routeData.GetRequiredString("controller");
var action = routeData.GetRequiredString("action");
return !(controller == "Login" && action == "Index");
}
and then:
#if (Html.ShouldDisplayMenu()) {
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
}

Resources