Asp.Net Razor View: HTML String bedingt ausgeben
Ich möchte einen a-href Link ausgeben oder anzeigen, wenn bestimmte Bedinungen vorhanden sind.
Im Beispiel soll der Favourit-Stern nur gezeigt werden, wenn im Suche-Feld eine Eingabe stattgefunden hat.
Zudem wird die View Abfrage zum Link-Ziel angepasst, wenn der User eingeloggt ist.
Im ersten Teil wird in der View der User geprüft und der Querystring der URL-Eingabe erfasst
@inject SignInManager<ApplicationUser> SignInManager @inject UserManager<ApplicationUser> UserManager @{ string sSearch = Context.Request.Query["s"]; } |
Dann wird die Ausgabe eines Links nur erzeugt, wenn eine Suche eingegeben wurde.
Wichtig ist dabei die Arbeitsweise des Razor-Kompilers zu verstehen.
Die Razor-View ist so geschrieben, dass der a-href direkt zur Laufzeit verstanden wird und somit als HTML-Text eingegeben wird.
@{ if (sSearch != null) { string sURL_SearchAgent = ""; if (SignInManager.IsSignedIn(User)) { sURL_SearchAgent = "xxx"; } else { sURL_SearchAgent = "https://localhost:44341/Account/Login"; }
<a href="@sURL_SearchAgent"><div class="NextLink" style="color:white;font-size:36px;margin-top:-10px;margin-left:4px">☆</div></a>
} } |
@inject SignInManager<ApplicationUser> SignInManager @inject UserManager<ApplicationUser> UserManager @{ string sSearch = Context.Request.Query["s"]; if (sSearch != null) { sSearch = System.Web.HttpUtility.UrlDecode(sSearch); } string sOrt = Context.Request.Query["o"]; if (sOrt != null) { sOrt = System.Web.HttpUtility.UrlDecode(sOrt); } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"]</title>
<environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> </environment> <environment exclude="Development"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> @*<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />*@ </environment>
<script src="~/js/layout_2018-07-18.js"></script> <link rel="stylesheet" href="~/css/site_2018-07-17.css" />
@*----< Meta-Tags >----*@ @Html.Raw(ViewData["MetaData"]) @*----</ Meta-Tags >----*@
@*----< Ads >----*@ @await Html.PartialAsync("_Ads_Google_Automatic") @*----</ Ads >----*@ </head> <body style=""> @*------------< Menu_Areas >------------*@ <div id="divMenu_Areas" class="divMenu_Areas" style="padding:0;background-color:black;height:36px;width:100%">
@*-------< Navbar-Menu >--------*@ <div id="divMenu_Area_Middle" class="divMiddle" style="width:100%;background-color:transparent;max-width:1000px;display:flex;flex-direction:row;"> <div style="color:white;display:flex;flex-direction:row;"> <a href="/📜" title="Freiberufler Projekte" class="mynavnavbar-brand" style="font-size:22px;"> <img src="~/_images/ico/icoLogo.png" style="margin-right:2px;vertical-align:text-bottom;" /> <span style="color:white;margin-right:4px;">Projektsuche für Freiberufler: </span> </a> <form id="frmList" style="display:inline-block" onsubmit="return send_Search()"> <input id="tbxSearch" name="tbxSearch" value="@sSearch" style="width:200px;color:black"> Ort: <input id="tbxOrt" name="tbxOrt" value="@sOrt" style="width:80px;color:black " /> <button type="submit" style="background-color:black;border:0px;padding:0px"><img src="~/_images/Ico/icoSearch.png" style="height:30px" /></button> </form>
@{ if (sSearch != null) {
string sURL_SearchAgent = ""; if (SignInManager.IsSignedIn(User)) { sURL_SearchAgent = "xxx"; } else { sURL_SearchAgent = "https://localhost:44341/Account/Login"; }
<a href="@sURL_SearchAgent"><div class="NextLink" style="color:white;font-size:36px;margin-top:-10px;margin-left:4px">☆</div></a> } } </div> </div>
@*--------</ Navbar-Menu >--------*@
@*-------< Right >-------*@ <div id="divMenu_Area_Right" class="divRight" style="padding:0;background-color:transparent;width:auto;display:flex;flex-direction:row;">
@*----< User-Part >----*@ @await Html.PartialAsync("_LoginPartial") @*----</ User-Part >----*@
@*----< User-Part >----*@ @await Html.PartialAsync("_MenuPartial") @*----</ User-Part >----*@ </div> @*-------</ Right >-------*@ </div>
@*------------</ Menu_Areas >------------*@ <div id="divBody_Content" class="body-content" style="">
@*------------< Body Main >------------*@ @RenderBody() @*------------</ Body Main >------------*@ <hr /> <footer style="text-align:left;display:flex;flex-direction:row;align-content:flex-start;"> @*----< Page Footer >----*@
<div style="text-align:left;width:100%;"> <div id="17398-31" style="text-align:left;display:flex;flex-direction:row;align-content:flex-start;"> <script src="//ads.themoneytizer.com/s/gen.js?type=31"></script> <script src="//ads.themoneytizer.com/s/requestform.js?siteId=17398&formatId=31"></script> </div> </div>
@*----</ Page Footer >----*@ </footer> </div>
<environment include="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> </environment> <environment exclude="Development"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk"> </script> <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"> </script> @*<script src="~/js/site.min.js" asp-append-version="true"></script>*@ </environment>
@RenderSection("Scripts", required: false) </body> </html> |