I am working on asp.net mvc3 application.
In my application, User can post their comment and at that time i want to display their post in same page using ajax and jquery. This application is like facebook - we can share post, user can comment to post and all.
I have created two actions
- setcomment
-getcomment
how can i do,
- at page load i want to display textarea and post button to post commnent and
- below that all post of the user will be displayed on that
- and user can post subcomments also.
I have my code working but in that i am using actionlink to go to another page and use refresh button to load page again.
i have
setcomment -
#model <NAMESPACE>.<MODELNAME>
<some code>
getcomment -
#model IEnumerable<<NAMESPACE>.<MODELNAME>>
<some code>
i am not able to call
<div id="showusercomments" style="float: left; width: 75%">
#Html.Partial("_GetUserComment")
</div>
what can i do to solve this problem?
Try using #Html.Action() instead of Html.Partial .
Also see:
my answer here
this SO answer
You've got two options:
<div id="showusercomments" style="float: left; width: 75%">
#Html.Action("_GetUserComment")
</div>
or, get the IEnumerable<...> in the parent page's controller and pass it to the partial:
<div id="showusercomments" style="float: left; width: 75%">
#Html.Partial("_GetUserComment", Model.Comments)
</div>
Related
I have a working ASP.NET Core 5.0 MVC application working. I want to know how I can add a razor view file in my wwwroot folder and use my controller to point to that .cshtml file and pass my payload?
I'm wondering if I can adjust my controller class to point to a razor view page that resides in wwwroot? Right now I have my controller class set up like this:
[Route("~/wwwroot/helloWorld/HelloWorld.cshtml")]
public IActionResult Index(string pageId)
{
switch (pageId)
{
case "Foo":
DataModel foo = new DataModel(pageId);
return View(foo);
case "Bar":
DataModel bar = new DataModel(pageId);
return View(bar);
}
return View();
}
I have a hyperlink set up in my Views/Home/Index.cshtml like this:
<ul class="navbar-nav flex-grow-1">
<li class="nav-item" style="display: inline-flex; margin-right: .5em; vertical-align:top">
#Html.ActionLink("Home", "Index", "Home")
</li>
<li class="nav-item" style="display: inline-flex; margin-right: .5em; vertical-align:top">
#Html.ActionLink("To Hello World", "Index", "HelloWorld", new { id = "Foo" })
</li>
</ul>
But I get this error every time:
No webpage was found for the web address:
https://localhost:5001/wwwroot/helloWorld/HelloWorld.cshtml?id=Foo
Am I doing something wrong or is this just not possible? If it's not possible, I'd like to understand why. Many thanks in advance.
But I get this error every time:
No webpage was found for the web address:
https://localhost:5001/wwwroot/helloWorld/HelloWorld.cshtml?id=Foo
Am I doing something wrong or is this just not possible? If it's not
possible, I'd like to understand why. Many thanks in advance.
It is possible to return/redirect the html page in the wwwroot folder from the MVC controller, but it is impossible to transfer the data/model from the controller to the static html page.
Static files, such as HTML, CSS, images, and JavaScript, are assets an ASP.NET Core app serves directly to clients by default. When access them, it will go through the UseStaticFiles() middleware, instead of via the asp.net core routing.
I have called scripts on _Layout.cshtml page and my Index.cshtml page has partial view into it. So on page load, SignalR scripts working perfect on partial view, on page end I make another ajax request and load the partial view with another data filled in that and embed under already displayed data, and then the SignalR does not work on the newly embedded record.
This is my index page code:
<div class="col-md-6">
<div class="profile-body">
<div class="row infinite-scroll">
#Html.Partial("_AlbumRow", Model)
</div>
</div>
</div>
This is my partial View Code:
#model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
#foreach (var item in Model)
{
<div class="widget">
<div class="block rounded">
<img src="#Url.Content(item.ImageUrl)" alt="#item.Title">
<input type="button" data-image-id="#item.imageId" class="btn btn-sm btn-default">Like</input>
</div>
</div>
}
Kindly help me how to resolve this issue that after making an ajax request I am not able to get those SignalR working. Here is more to say when I put the SignalR scripts on PartialView that works but it also sucks that on each ajax request there is again SignalR loaded on the page and when I click on LIke button it makes many calls to the function behind it.
Kindly help me to resolve this issue, I am stuck at this point since 1 week.
Here is signalR Code:
$(".btn.btn-sm.btn-default").on("click", function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(imageId);
});
Problem: You are binding event to elements directly, So when you remove this element and replace it with a different one the events are also removed along with that element, This is something like strongly coupled.
Solution: Use Jquery event delegation. This will make sure the events will be triggered on the current elements and also all the elements that can come in future.
syntax is as below.
$(document).on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
NOTE: This was never a singlaR issue, it was Jquery issue.
Efficient Way: The problem in using $(document).on("click"... is that when ever there is a click happening on the entire page the Jquery framework will bubble the events from the clicked element upwards(its parent, and its parent and so on..) unless the element specified in the selector arrives, So its kind of performance hit as we don't want this check's to run if we are clicking outside the required area ( button .btn.btn-sm.btn-default in this example).
So best practice is to bind this event delegation to the closest parent possible which will not be removed, <div class="row infinite-scroll"> in this question. So that only when the click happens within this element the event bubbling will happen and also will be stopped once it reaches the parent element,it acts kind of a boundary for event bubbling.
$('.row.infinite-scroll').on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
I'm working on an ASP.NET MVC3 project. I'm using Twitter Bootstrap for my styling (not sure if that's important). The problem I have is that my Index.cshtml view of the Home controller has slightly different layout from the other pages (additional image navigation at the top which I don't show once the user select where he wants to go) but this is causing problems so I remove this part from the Index view to another partial view _ImageNavigation.cshtml and what I want to do is render the content of this partial view when Home/Index.cshtml is opened and I want to render it before the #RenderBody() also independently from it so I get the page the way I want it.
Right now in my _Layout.cshtml I have:
<div id="main">
<div class="container-fluid">
<div class="row">
<div class="col-md-10">#RenderBody() </div>
<div class="col-md-2">
//some static content
</div>
</div>
</div>
So I have two ideas first - adding #RenderPage("~/Views/Shared/_ImageNavigation.cshtml") right before #RenderBody() like :
<div class="row">
#RenderPage("~/Views/Shared/_ImageNavigation.cshtml")
<div class="col-md-10">#RenderBody() </div>
which produces the effect I want, but as you may guess _ImageNavigation is rendered on every page which is not what I want. I want it only on my Home/Index.cshtml so I guess the maybe some kind of check could be made to see what view is loading and render _ImageNavigation only if it's the correct view. Something like :
if (LoadingView == Home/Index.cshtml)
{
#RenderPage("~/Views/Shared/_ImageNavigation.cshtml")
}
Of course the above is just pseudo code, I don't know if it's possible and how to make such a check. And also I wonder if there is a way to do it in the page itself. I tried to put #RenderPage("~/Views/Shared/_ImageNavigation.cshtml") directly in my Home/Index.cshtml but obviously this way the page is rendered as if the code is written directly in the View and not loaded explicitly.
Maybe there's other way. This seems like pretty standard problem but I don't seem to find a proper solution.
When you have a smaller number of exceptions I like to use Sections. Here is a very simlified example:
Layout:
#if (IsSectionDefined("Nav"))
{
RenderSection("Nav")
}
else
{
<nav>default nav</nav>
}
#RenderBody()
Page with alternative nav:
#section Nav
{
<nav>My alternate nav</nav>
}
<div>This is the body for RenderBody</div>
You can read more on Defining Default Content For A Razor Layout Section - Phil Haacked.
I have an MVC3 C#.Net project. When I initially load my Web site, I want to route to an Index page and have the navigation tabs at the top of the screen be disabled until a selection is made. Once a selection is made, the site routes to a details page. I would then like to enable the navigation menu itmes. How can I do this? Pass a ViewBag around? Not sure
I think the problem is that Index page doesn't follow a layout of the rest of the website, therefore index page shouldn't use a master layout.
On your index page:
#{
ViewBag.Title = "Index page";
// Null or a custom layout
Layout = null;
}
<p>Your content below</p>
If you want to render a menu on some condition, then store menu in a partial view model, e.g. SiteNavigation.cshtml
You can then render this view based on some condition. E.g.
#if(true){
#{ Html.RenderPartial("SiteNavigation"); }
}
I found an answer to my question. #CodeRush's answer is cool, which I will use in another scenario. But I like the implementation, below, for my prticular situation. In the Object1Controller Index get Action, I added the below code:
ViewBag.Hidden = "hidden";
Then in the Details get Action, which is the Action called when a link is clicked on the Index view, I added this code:
ViewBag.Hidden = "visible";
Then in the _Layout.cshtml I added this code:
<li style="visibility: #ViewBag.Hidden">#Html.ActionLink("About", "About", "Home")</li>
Which renders as:
<li style="visibility: hidden">About</li>
or
<li style="visibility: visible">About</li>
In the other Controllers, I don't need to set the ViewBag.Hidden property since the default for the visibility attribute is "visible". For the other Controllers, the ViewSource shows:
<li style="visibility: ">About</li>
Which renders as visible
I've added an ASP.net MVC validation summary and even when the page is first loaded and when ModelState is valid it renders this out...
<div class="validation-summary-valid" data-valmsg-summary="true"><span>Errors</span>
<ul><li style="display:none"></li>
</ul></div>
The text 'Errors' is not hidden! (Its not even styled but that's not the point!)
How do I make it only show the validation summary heading when there's an error?
Cheers, Ian.
The validation-summary-valid CSS class is defined in the default MVC /Content/Site.css file as:
.validation-summary-valid
{
display: none;
}
...do you definitely have a reference to this file in your View?