MVC change image button image on the view from the controller - asp.net-mvc

I am new to MVC . I am creating a bookstore webpage application using aspx, and mvc. I have a database of books that says available or sold out. When a user clicks a dropdownlist they choose a book, it shows an image next to the book that is either supposed to show a green check mark if it is available or a red X if its not available. That information is all pulled from a database. My question is how do I change the image once a book becomes available. By the way my images are stored in my Content folder under imgs.
I have been searching for a while and haven't found a good answer. Any help or any websites you can suggest would be great thanks.
My image says this
<asp: Image ID = "Book_Availability" runat = "server" />
-----------Update----
When I mean change, I mean change the ImageURL so that it points to a different picture. On the server side I have value of 0 or 1. When I get a 1 i want to update the image URL to point to a different ImageURL from the controller, so that its from a X to a check mark. I am not sure how to accomplish this using MVC

Check out this link on Razor syntax. You could achieve what describe with something like:
#{
string availableImage = Url.Content("~/Images/availableImage");
string unavailableImage = Url.Content("~/Images/unavailableImage");
}
<img src= "#(Model.IsAvailable ? availableImage : unavailableImage)" alt="" />

You could perhaps add an click event handler onto the dropdown using jQuery. This could in turn do a $("#myimagewrapperexample").load() event against an action on some controller i.e BooksController
The action could return a partial view containing the books current image for example. Or it could return true, false depending on the books availability and you toggle the image in your javascript. All the action would need to be passed would be the id of the book and you could then look it up to determine it's status.
I've never used asp tags in a MVC project so can't comment on your usage there. AlexC suggestion of looking into the Razor syntax if your using MVC 3 is a good idea. Otherwise you might want to look into creating views using MVC 2. This Microsoft link might help you out on that front.

Related

Add page content dynamically MVC 5

I need to build a manage environment for my users so they could create new views (to give a title, a category, and the main content) or edit the content of the views that already have been created. I need to store this information in a database and have it appear in my site. I search through the internet but I didn't find a solution. I need this because I would like my site to have searchable content and because I have to many pages. Is that possible to achieve with MVC?
first step
Save view content as string using a wysiwyg editor, I recomend
http://summernote.org/
You need show your html using Html.raw() :
Exemple: Html.Raw("<div class=\"resource-row\">")
that way you will show your string as HTML.
I hope it is useful

Isn't ASP.NET MVC _layout.cshtml similar to Webforms Master page?

I have an MVC 4 project with a layout page that I have setup with images that are links like this
<img id="logoImage" src="~/Content/siteImages/myLogo.png" alt="My logo" title="Welcome to my site" />
I have also tried this:
<img id="logoImage" src="../Content/siteImages/myLogo.png" alt="My logo" title="Welcome to my site" />
And this:
<img id="logoImage" src="#Url.Content("~/Content/siteImages/myLogo.png")" alt="My logo" title="Welcome to my site" />
These all work fine as long as the controller is the home controller. I use an Actionlink #Html.ActionLink("Northwind Demo", "Northwind", "Northwind", null, new { #class="links"}) to get to another controller.
As soon as the ActionLink is clicked, my images disappear. I examined the rendered link text in the browser and it is the same as it was before.
src="Content/siteImages/myLogo.png"
However, when examining the request in the network tab of the browser the url for the image is now
Northwind/Content/siteImages/myLogo.png
which does not resolve. For some reason the browser is adding the name of the controller to the beginning of the request for the image. I am sure that I am missing something really dumb but...
How do I fix this?
Edit
I wonder if this is an issue that only happens when running locally and may disappear when deployed to a server? I am still unable to fix this.
Edit
I am really struggling with the fact that no one else has encountered this before. I was under the impression that _layout.cshtml was like a master page in WebFroms. I need some suggestions here.
EDIT
So I had a moment of success. I changed the name of the entry method into the Northwind controller to Index and the images displayed properly in the index view. However, if I call another view, then the images disappear again.
I use radion buttons to select a different view based on which one is selected like this:
public ActionResult Search()
{
int id = Convert.ToInt32(Request.Form["radio"]);
switch (id)
{
case 1:
return View("Customer");
case 2:
return View("Orders");
case 3:
return View("Employees");
default:
ViewBag.Error = "Search parameter not found";
return View("Index");
}
}
I am still not able to fix this but I think that I am closer to a solution with someone's help.
Thanks in advance
Don't use relative addressing in MVC, since as you can tell you run into problems because views can be accessed from multiple routes (ie, /, /Home, /Home/Index, etc.. are all the same view, but different paths, if you use ../whatever then /Home/Index becomes /Home/whatever, / and /Home become /whatever)
Always use either #Url.Content to generate urls if you're not in a Razor 2+ view. If you're in Razor 2 or greater, then you can use src="~/Content/images/whatever"
If these methods are not working, then you need to look at your Application root, web.config, etc.. because MVC is becoming confused about where the root of the site is.
Well I have figured this out and I feel like an idiot! I have a script file that I use to change the images when it becomes small enough so that they continue to fit on the screen as it gets smaller for a responsive design. Like this:
$("#logoImage").attr("src", "Content/siteImages/logoSmall.png");
Well, the missing / at the very beginning is what was causing the issue. Adding the / fixed all my issues. Like this:
$("#logoImage").attr("src", "/Content/siteImages/logoSmall.png");
Even though I feel very silly at this moment, I am posting my answer in case someone else comes along and has a similar issue. Don't forget your script files and don't leave anything out when trying to fix a weird issue. Thanks to everyone that looked at this and tried to help.

How to properly encode links to external URL in MVC Razor

This view suppose to show a list of hyperlinks, each pointing to an external URL. The goal is for the user to click one of these links and have their browser open a new tab with the selected URL.
Currently I have the following markup:
#Html.ActionLink("SomeSite", "http://subdomain.mydomain.com/SomeSite")
This markup produces:
http://localhost:58980/AccessInstance/http%3a/subdomain.mydomain.com/SomeSite
instead of :
http://subdomain.mydomain.com/SomeSite
What can I change in my markup to make this work as I expect?
You don't need to use #Html.ActionLink for that. Just use a plain A tag:
SomeSite
Html.ActionLink is specifically for generating links to actions defined in MVC controllers, in the same app. Since you're linking to an absolute URL, you don't need any of the functionality that Html.ActionLink provides.
Two ways :
1. update the database column with full link:
eg SQL:
update ProductTable set ProductLink='http://www.example.com/Product/Mobiles' where ID=123
In asp mvc view
View
2. Hardcode the http part and list from model
View
Hope helps someone.
While a ViewBag is overused and not the best choice most of the time this is something that I had done when inheriting someone else's mvc app to do a quick fix for a URL that I needed to redirect to with a specific dynamically changing querystring parameter
<a target="_parent" href="http://localhost:56332/services/#ViewBag.factory">View Service</a>
Using .NET Core 6
This seems to be the most correct answer:
Link
This will generate the following result:
As you can see at the bottom left corner of the window before clicking the link, the URL address was rendered as it is (NOTE: The cursor was recorded out of place for some reason, that's a ShareX problem, ignore it).
Than link will be directly saved as a nvarchar(750) type (probably any character like type will do the work). No changes to the original link were made before saving it or on reading:
You need to take into account your RouteConfiguration.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}"
because you are specifying the action link as the entire link that you want to redirect.
I would recommend that you use the #rossipedia answer because you can make tricky things like putting a span inside the link
Here to display link that are clickable in index page
<td>
#Html.ActionLink(item.FileName, "../Uploads/Catalogue/"+item.FileName)
</td>

how to set navigate url to hyperlink through c#

am developing an application in which i have to show the customer purchase details supplier wise. for that i have develop user control an add it on page. but the problem it that on user control i need to add a ling to promotional offer page for that supplier which show the current offers of the supplier. for that i have added the hyperlink as fallow to user control
<asp:HyperLink ID="PromoLink" runat="server">Have promo Code ?</asp:HyperLink>
and set the navigation URL as fallow
PromoLink.NavigateUrl = "Promotion.aspx?Filter=" + dt.Rows[0]["SuppId"].ToString();
but when page is load in does not render the navigation url to the link.
i donot why it does not render the url plz help to get out of this.
thanks in advance.
Make sure that the pathing is correct for the NavigateURL property. Try adding "~/" at the start of the NavigateURL or "../" if it is not in the same folder as the current file.
Make sure that the dt.Rows[0]["SuppId"] is actually getting the value that you expect.
Step through code in the debugger to verify that the Page_Load event that you are using is actually executing and modifying the value as you would expect it to.

Orchard CMS Recent Blog Post Widget Alternate View

I'm new to Orchard CMS and MVC so please forgive my ignorance. I've done a search and not found anything apparently relevant....
In one of the Footer Quad zone on my Orchard site I want to show the 5 most recent blog posts, just by title. At present it show the title, post, tags etc all in their unformatted state(Ive not style the blog yet).
Using the tracing tool I've created an alternate view called;
Parts.Blogs.RecentBlogPosts
However the only content in this view is;
#Display(Model.ContentItems)
Which -unlike other installed widgets Ive edited alternate views for- doesn't give me anything to play around with to create the layout I'm needing to create.
Have I selected the wrong shape / view, or do I need to get stuck in with some coding???
As I say, I'm new to both MVC and Orchard but very keen to learn. Any help on this will, as always, be greatly appreciated.
I got the exact same problem while trying to differentiate recent blog posts layout from blog summary posts. I followed this concept
http://weblogs.asp.net/bleroy/archive/2011/07/31/so-you-don-t-want-to-use-placement-info.aspx
and created Parts.Blogs.RecentBlogPosts alternate. Then while navigating through the model using shape tracing tool I found all elements I was looking for and put them in my new shape. I know that my approach might not be the most appropriate one but it works. Maybe it would be a starting point for someone who would need to do similar thing:
<div class="last-news">
<ul>
#foreach (var item in Model.ContentItems.ContentItems.Items)
{
var max = (item.ContentItem.BodyPart.Text.Length > 100) ? 100 : item.ContentItem.BodyPart.Text.Length;
<li><header>#Display(item.ContentItem.CommonPart.PublishedUtc.ToShortDateString())</header></li>
<li><h1>#Display(item.ContentItem.TitlePart.Title)</h1></li>
<li>#Display(Html.Raw(item.ContentItem.BodyPart.Text.Substring(0, max)))</li>
}
</ul>
</div>
It does deserve an explanation. Model.ContentItems here really is a List shape. When you call Display with it, it will locate the most appropriate template for a list shape (and that can be an alternate) and renders it. The default List rendering just renders UL/LI and in each LI calls Display on the individual Content shape for the list element, but with the Summary display type. When that in turn gets rendered, the system locates the most relevant Content template, which usually renders a bunch of zones, inside of which the parts get pushed according to placement. So there is a lot going on, in quite a few nested levels.
Still, it is possible to override the whole thing at any level. The difficulty is to know what to put there. The easiest for this is to explore the Model in shape tracing and see what you can use.
This article shows how to override list rendering in a particular situation and take it over entirely:
http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx
The Parts.Blogs.RecentBlogPosts view displays Parts_Blogs_BlogPost_List shape (Parts.Blogs.BlogPost.List.cshtml) which displays BlogPost content items. (You can see it in RecentBlogPostsPartDriver.cs). BlogPost content type consists of TitlePart and BodyPart parts which has their own shapes and views (or templates in Orchard terminology).
So to make some corrections for those templates you could try to alternate Parts_Blogs_BlogPost_List, Parts_Common_Body_Summary and other shapes.
Please see the following instructions on Orchard docs page especially:
Alternates
Accessing and Rendering Shapes

Resources