Преобразование формы HTML в формат CSHTML

Question

Я новичок в ASP.NET и я преобразовать проект Java EE в ASP.NET MVC 4, для этого я должен преобразовать вид HTML форму в формате CSHTML

Здесь HTML код для формы:

<div id="hec-login"> 
<div id="login-tag-line" class="tag32">Higher Education Council Login</div> 
<div id="ver-line">&nbsp; 
</div> 


<div id="login-form-area"> 
<div class="login-username"> <input type="text" name="username" value="" id="validateHecUser_username" class="select" style="width:200px; float:left; height:42px;" placeholder="User Name"> 
</div> 
</div> 

<div id="login-form-area"> 
<div class="login-username"> <input type="password" name="password" id="validateHecUser_password" class="select" placeholder="Password"> 
</div> 
</div> 


<div id="login-botton"> 
<div class="login-username"><input type="image" alt="" src="~/Images/login.png" id="validateHecUser;jsessionid=60115189D49A29E0654E8315DA058D60_submit" name="submit" value="Log in"> 
</div> 

</div> 

вверх до уровня ниже я пытался получить точное представление в CSHTML,

CSHTML Код:

@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { 
@Html.AntiForgeryToken() 
@Html.ValidationSummary(true) 

<fieldset> 
    <legend>Log in Form</legend> 
    <ol> 
     <li> 
      @Html.LabelFor(m => m.UserName) 
      @Html.TextBoxFor(m => m.UserName) 
      @Html.ValidationMessageFor(m => m.UserName) 
     </li> 
     <li> 
      @Html.LabelFor(m => m.Password) 
      @Html.PasswordFor(m => m.Password) 
      @Html.ValidationMessageFor(m => m.Password) 
     </li> 

    </ol> 
    <input type="submit" value="Log in" /> 
</fieldset> 

Я хочу, чтобы найти какие-либо ресурсы или способ переходить к точной HTML-картинке в формате CSHTML.

Answer 1

Просто попробуйте с этим,

вставить фрагмент кода областей ввода формы текста в @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }))

так же, как ниже,

 <div id="hec-login"> 
    <div id="login-tag-line" class="tag32">Higher Education Council & Higher Education Institute Login</div> 
    <div id="ver-line">&nbsp; 
    </div> 


    @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { 
     @Html.AntiForgeryToken() 
     @Html.ValidationSummary(true) 


    <div id="login-form-area"> 
    <div class="login-username"> <input type="text" value="" name="UserName" id="validateHecUser_username" class="select" style="width:200px; float:left; height:42px;" placeholder="User Name" > 

    </div> 
    </div> 

    <div id="login-form-area"> 
    <div class="login-username"> <input type="password" value="" name="password" id="validateHecUser_password" class="select" placeholder="Password" > 

    </div> 
    </div> 


    <div id="login-botton"> 
    <div class="login-username"><input type="image" alt="" src="~/Images/login.png" id="validateHecUser;jsessionid=60115189D49A29E0654E8315DA058D60_submit" name="submit" value="Log in"> 

    </div> 

    </div> 


    } 
    </div> 

Answer 2

Привет, я хотел бы сначала взглянуть на Microsoft virtual academy. вы можете найти все, что вам нужно здесь. Из кода я понимаю, что вы используете синтаксис Razor, который велик, потому что вы получите всю помощь по ссылке.

Answer 3

вот что я понял. Дайте мне знать, если вам нужна дополнительная информация.

1. Вы преобразовали вашу страницу html в вид cshtml в приложении mvc 4. Это нормально. Но вам нужно иметь модель представления, поскольку вы видите, что используете эти свойства модели в своем представлении.

   @Html.LabelFor(m => m.UserName) 
   @Html.TextBoxFor(m => m.UserName) 
   @Html.ValidationMessageFor(m => m.UserName) 
   

Так что вам нужно создать класс модели и добавить его на вершине зрения, чтобы получить доступ к его свойствам. Пример

@model LoginViewModel 
@Html.ValidationSummary(true) 

<form> 
<legend>Log in Form</legend> 
<ol> 
    <li> 
     @Html.LabelFor(m => m.UserName) 
     @Html.TextBoxFor(m => m.UserName) 
     @Html.ValidationMessageFor(m => m.UserName) 
    </li> 
    <li> 
     @Html.LabelFor(m => m.Password) 
     @Html.PasswordFor(m => m.Password) 
     @Html.ValidationMessageFor(m => m.Password) 
    </li> 

</ol> 
<input type="button" id="login-button" value="Log in" onclick="location.href='@Url.Action("Index", "Login")'" /> 
</form> 

Теперь вы видите, что у вас есть кнопка входа в системе с идентификатором = логином-кнопкой.

Вы можете использовать divs вместо ul li. Они работают так же, как и на html-страницах, которые вы использовали ранее. Это полностью зависит от вашего требования. Так определяется ваша модель и ее свойства. Обратите внимание на аннотации данных. [Требуется]

namespace Models 
{ 
    public class LoginViewModel 
    { 
      [Required(ErrorMessage = "Please enter Username")] 
      public string UserName { get; set; } 
      [Required(ErrorMessage = "Please enter Password")] 
      public string Password { get; set; } 
    } 
} 

Вы должны создать контроллер для входа

namespace Controllers 
{ 
    public class LoginController 
    { 
     [ValidateAntiForgeryToken] 
     public ActionResult Login(LoginViewModel loginModel) 
     { 
      //-- Your logic here. 
     } 
    } 
} 

Для начала вы можете следить за этим. Я надеюсь, что это помогает