i am very new to angular and have been doing some basic stuff.
I am trying to convert some view to use angular and i am stuck
can someone with help how i would do the following using angular
<img data-original="img/property/pic (2).jpg" alt="#item.Description" src="#Url.Action("GetImage", "Home", new { id = item.RentalID })" class="img-hover">
i want to repleace the "item" with a data repeater {{i.Item}} for example
I've tried this but it wont work
<img data-original="img/property/pic (2).jpg" alt="{{i.Description}}" src="#Url.Action("GetImage", "Home", new { id = {{i.RentalID }}})" class="img-hover">
You can't, because the #Url.Action is rendered on the server whereas the angular stuff is done later, on the client.
You could however try this:
<a ng-href="#Url.Action("Details","Home",new { PropertyType="Rentals" })&propertyID={{i.RentalID}}"><img data-original="img/property/pic (2).jpg" alt="{{i.Description}}" ng-src="#Url.Action("GetImage", "Home")?id={{i.RentalID}}" class="img-hover"></a>
Please note that I used ng-href and ng-src since we are now using dynamic properties in the URL:
Using Angular markup like {{hash}} in an href attribute will make the
link go to the wrong URL if the user clicks it before Angular has a
chance to replace the {{hash}} markup with its value. Until Angular
replaces the markup the link will be broken and will most likely
return a 404 error. The ngHref directive solves this problem.
Related
I have an MVC 6 project that has routing set up as:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}/{closeOnSubmit?}");
});
I'm attempting to build a hyperlink using tag helpers like:
<a asp-controller="MyController" asp-action="Create" asp-route-closeOnSubmit="true" class="fa fa-plus indent-15">+</a>
When the page is created and I mouse over the link, it's reporting as http://localhost/MyController/Create without the closeOnSubmit parameter. When I examine the HTML in Chrome's developer tools, it looks like:
<a href class="fa fa-plus indent-15">+</a>
What do I need to do to get the closeOnSubmit parameter to be properly appended to the route?
Edit:
I don't fully understand MVC routing, so unfortunately gave some erroneous information. When I first created my app, it had the default route of:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
When trying to get this working, I thought that maybe it wasn't routing correctly because I didn't have closeOnSubmit added into the route. After reading Darin's answer, I understand it and definitely had it wrong after adding it to the route. However, for this particular route, I don't need an id passed. I tried changing the default route so that it used closeOnSubmit rather than id and it still didn't fix the issue of links not being created correctly.
While troubleshooting, I also found that the routes are even more wrong than I thought. The page I am working on is generated by going to http://localhost/ControllerOne/Create. The page that the hyperlink should point to is http://localhost/ControllerTwo/Create'. Even though my asp-controller tag is set to ControllerTwo, all of my hyperlinks are showing ashttp://ControllerOne/Create`. I have a feeling that that's just because of the empty href attribute, but I'd like to know what's causing the href attribute to be empty.
Only the last parameter of a route can be optional. Otherwise the routing engine simply cannot disambiguate your routes.
Think about it, when the routing engine encounters this url:
http://localhost/MyController/Create/true
does the true token should be bound to the id parameter or the closeOnSubmit parameter?
So make sure that your id parameter is mandatory:
template: "{controller=Home}/{action=Index}/{id}/{closeOnSubmit?}"
and that you have specified a value for it when building your url:
<a asp-controller="MyController" asp-action="Create" asp-route-id="1234" asp-route-closeOnSubmit="true" class="fa fa-plus indent-15">+</a>
Wow, PEBKAC.
The problem came in because the controller I was referencing didn't exist yet. Which, IIRC, would cause an error in MVC5 rather than creating an empty HREF tag. Either way I should have been smart enough to see that one.
How do I convert the following url.action link to a boot strapped button.
<a data-ng-href="#Url.Action("Create", "Profile")" target="_self">Create New </a>**strong text**
This button upon click needs to redirect the current page to Create Action and Profile Controller.
I am trying to bootstrap and angularize a legacy asp.net mvc 4 app.
Thanks
You can give an anchor tag a class of button which makes it look like a button but it can still contain a href. The alternative is in the controller to have a function to change the path using angulars $location service, eg:
$scope.setLocation = function(url) {
$location.path(url)
};
in the html:
<div class="button" ng-click="setLocation('path/to/location');
I am working on Asp.net MVC 4 with Razor. The urls of my projects are like
localhost:port/category1
localhost:port/category2 etc while my controller is home and action is MyCustomAction
I am using Paging on Category1 page with ul li and anchor tag with href="javascript:ShowPage(pagenmbr)"
And Code of ShowPage function is $('#currentpage').val(pagenmbr); $('#myform').submit();
where currentpage is hidden field on my cshtml page
My form is
#using(Html.BeginForm("home","MyCustomAction",FormMethod.Post,new { #id="myform"})
and as i pressed any link for any page functionality is working properly
but in that case my url becomes
localhost:port/category1?controller=home&action=MyCustomeAction
while I don't want this url pattern url should be
localhost:port/category1
Am I doing something in a wrong way, please help me.....
please help me out
Obviously, there's something wrong in your routing. Try posting the code from your Route registering class.
Also for the below line:
#using(Html.BeginForm("home","MyCustomAction",FormMethod.Post,new { #id="myform"})
Try switching this to:
<form method="post" id="myform">
Doing this, will force the form to always submit to the current Url.
And you can't use the HtmlHelper to generate this as you need to specify the htmlAttributes which can only be passed after the actionName and the controllerName.
I'm using MVC 3 (the ASPX ViewModel) while I store and display data from my SQL database. I've tried using the raw input to store it as well as using HttpUtility.HtmlEncode. Neither are working when I try to display. I've tried using the HttpUtility.HtmlDecode as well as using <%: Model.MyHtmlVariable %>. Am I missing something?
Using the traditional "<%= html %>" syntax should render it out for you but may not depending on what you're doing. If not, try to wrap it in an HtmlString object, like so:
<%= new HtmlString(html) %>
MVC should respect that and render it out properly.
If you're just looking to display the encoded HTML, the "<%: html %>" syntax is your friend
You need to create a div to target and set the html using an jquery/javascript call to the controller action.
jQuery.get("/Controller/Action",
function(response) {
$("#MyDiv").html(response)
});
See if something like that works.
<% Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "form_logon" }); %>
or
<form id = "form_logon", action="/Home/Index" method="post">
just don't work.
Pressing a submit button if ID is present does nothing, while id is required for jQuery validation plugin.
Are you sure you don't have any javascript errors on your page? I use the first format pretty extensively with no problems, with and without the Validation plugin. Note that your second example has an extra comma, but I'm guessing that's a transcription error. I'd look to make sure that you don't have a javascript error that is halting all javascript on the page (though that wouldn't explain a plain, old submit button not working).
I got similar issue and couldn't get any proper solution to this. However, since I only had one form in my MVC page, I reverted back to Html.BeginForm() without any parameters, and in the jQuery code, I just used the following:
$("form").validate(/* my rules and messages */);
instead of:
$("#userForm").validate(/* my rules and messages */);
Hope this helps.
Regards
Naweed