ASP.NET MVC和C#DropDownListFor设置并获取值

时间:2019-03-05 00:38:30

标签: c# asp.net-mvc razor

修改了ASP.NET MVC的一堆代码,到处都是至少500行代码的示例。

这里有Plane目录的列表(key.plane键)。当前有一个InstanceC条目(链接到InstanceC.ID_plane目录)

从加载列表的控制器中设置值并由用户读取所选值有多容易?

我有以下代码:

AccountController.cs

public ActionResult ClickDetails(String slctplane, String Description,String SaveInstance, string AddInstance, string ActivePlane, string RestartInstance, string GeneratePassword, string ResetDB, String DelInstance)
{
    if (ActivePlane != null)
    {
        String id_plane = slctplane; // Выбранный тарифный план
    }
}

模型类:

public class Plane
{
    [Key]
    public int key_plane { get; set; }

    public String Name_plane { get; set; }
    public int Num_users { get; set; }
    public int Size_db { get; set; }
    public int Freq_in_minute { get; set; }
    public int Price_usd { get; set; }
    public int Price_r { get; set; }
}

public class InstanceC
{
    [Key]
    public int key_Instance { get; set; }

    public String ID_user { get; set; }
    public int ID_Server { get; set; }
    public String Login_inst { get; set; }

    public String Password_inst { get; set; }
    public int SetStatusForBroker { get; set; }
    public String Description { get; set; }
    public int ID_plane { get; set; }
    public String Name_plane { get; set; }
    public int Price_usd { get; set; }
    public int Price_r { get; set; }
    public int Num_users { get; set; }
    public int RealStatus { get; set; }
    public String Name_server { get; set; }
    public String Name_domain { get; set; }
}

我在Details.cshtml中有以下标记:

@{
    ViewBag.Title = "Подробнее/";
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<body>

@using (Html.BeginForm("ClickDetails", "Account", FormMethod.Post))
{
    <div>
        <h2>Подробнее</h2>
        <div class="cloud-box">
            <div class="row">
                <div class="col-md-12">
                    <h3>Информация о инстанции</h3>
                </div>
            </div>

  @foreach (var i in ViewBag.Details)
  { 
             <div class="row">
                <div class="col-md-8">
                    <table class="table cloud-data">
                        <tbody>
                            <tr>
                                <td>Название</td>
                                <td>
                                    <input name="Description" type="text" value="@i.Description" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
                                    <button name="SaveInstance" value="@i.key_Instance" type="submit" class="btn btn-success btn-sm pull-right">
                                        <i class="glyphicon glyphicon-floppy-saved"></i>
                                        Сохранить
                                    </button>

                                    <button name="DelInstance" value="@i.key_Instance" type="submit" class="btn btn-danger btn-sm pull-right">
                                        <i class="glyphicon glyphicon-floppy-saved"></i>
                                        Удалить
                                    </button>
                               </td>
                            </tr>
                            <tr>
    <td>Тарифный план</td>
    <td>
                                    <button type="button" value="" class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#ActivePlaneDlg">
                                        <i class="glyphicon glyphicon-usd"></i>
                                        Активировать
                                    </button>
                                    <div class="modal fade" id="ActivePlaneDlg" tabindex="-1" role="dialog" aria-labelledby="ActivePlaneTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="ActivePlaneTitle">Активация тарифного плана</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    Старый тарифный план будет аннулирован.
                                                    Активировать и оплатить новый тарифный план?
                                                </div>
                                                <div class="modal-footer">

                                                    <button class="btn btn-secondary" id="ActivePlane" name="ActivePlane" value="id_plane=1">
                                                        <i class="glyphicon glyphicon-usd"></i>
                                                        Да
                                                    </button>

                                                    <!--
                                                                                                        <input type="submit" name="ActivePlane" value="Сохранить" />
                                                                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Да</button> -->
                                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Нет</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </tr>
                            <tr>
                                <td>Статус тарифного плана</td>
                                <td>
                                    <font color="green">Активирован</font>
                                </td>
                            </tr>

                            <tr>
                                <td>Дата продления</td>
                                <td>01.01.2019</td>
                            </tr>

                            <tr>
                                <td>Автопродление</td>
                                <td>Активировано</td>
                            </tr>
                            <tr>
                                <td>Сервер</td>
                                <td>@i.Name_domain</td>
                            </tr>
                            <tr>
                                <td>Пользователь</td>
                                <td>
                                    @i.Login_inst
                                    <button type="button" class="btn btn-cloud btn-cloud-danger btn-sm pull-right" data-toggle="modal" data-target="#RebootInstanceDlg">
                                        <i class="glyphicon glyphicon-repeat"></i>
                                        Перезапуск
                                    </button>

                                    <div class="modal fade" id="RebootInstanceDlg" tabindex="-1" role="dialog" aria-labelledby="RebootInstanceTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="RebootInstanceTitle">Перезагрузка</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    Вы уверены, что хотите перезагрузить инстанс?
                                                </div>
                                                <div class="modal-footer">
                                                   <!-- <button type="button" name="RestartInstance" class="btn btn-secondary" data-dismiss="modal">Да</button>

                                                    <input type="submit" name="RestartInstance" value="Да" />-->


                                                    <button class="btn btn-secondary" id="RestartInstance" name="RestartInstance" value="id_instance=1">
                                                        <i class="glyphicon glyphicon-repeat"></i>
                                                        Да
                                                    </button>     

                                                      <button type="button" class="btn btn-primary" data-dismiss="modal">Нет</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Пароль
                                </td>
                                <td>
                                    @i.Password_inst
                                    <button type="button" class="btn btn-cloud btn-cloud-danger btn-sm pull-right" data-toggle="modal" data-target="#ResetPasswordInstanceDlg">
                                        <i class="glyphicon glyphicon-refresh"></i>
                                        Сгенерировать
                                    </button>


                                    <div class="modal fade" id="ResetPasswordInstanceDlg" tabindex="-1" role="dialog" aria-labelledby="ResetPasswordInstanceTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="ResetPasswordInstanceTitle">Генерация нового пароля</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    Сгенерировать новый пароль?
                                                </div>
                                                <div class="modal-footer">


                                                    <button class="btn btn-secondary" id="GeneratePassword" name="GeneratePassword" value="id_plane=2">
                                                        <i class="glyphicon glyphicon-refresh"></i>
                                                        Да
                                                    </button>                                                    

                                                   <!-- <button type="button" id="GeneratePassword" class="btn btn-secondary" value="id_psw=1" name="GeneratePassword" data-dismiss="modal">Да</button>  -->


                                                    <!--<input type="submit" name="GeneratePassword" value="Да" />-->

<!--
                                                    <button class="btn btn-danger" id="resetdb" name="ResetDB" value="id_plane=1">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                        Сброс БД
                                                    </button>
                                                    >-->
                                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Нет</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>




                                </td>
                            </tr>

<!----------------------------Начало: Список доступных портов---------------------------------------------------->


                            @foreach (var a in ViewBag.PortsDetail)

                            { 





                            <tr>

                                <td>Протокол</td>
                                <td>
                                   @a.NamePort
                                </td>
                            </tr>


                            <tr>
                                <td>Порт №</td>
                                <td>
                                    @a.NumPort
                                </td>
                            </tr>
                            <hr>

                            }
<!---------------------------Конец: Список доступных портов------------------------------------------------------>

                        </tbody>
                    </table>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <h3>Сброс БД</h3>
                </div>
                <div class="col-md-10">
                    Это сотрет все сохраненные сообщения в БД.
                </div>
                <div class="col-md-2">
                    <form action="https://*/console/9751325/details/reset" class="pull-right" id="reset-form" method="post">
                        <button class="btn btn-danger" id="resetdb" name="ResetDB" value="id_plane=1">
                            <i class="glyphicon glyphicon-trash"></i>
                            Сброс БД
                        </button>
                    </form>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <h3>API</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-2">
                    <strong>API ключ</strong>
                </div>
                <div class="col-sm-10">
                    <code>0942387c-de7c-4241-2349da3-e59e4c1afdf6</code>
                </div>
            </div>

      }  
        </div>
   </div> 

}

</body>
</html>

2 个答案:

答案 0 :(得分:0)

您可以使用Model进行表单。这样,您就可以在控制器中设置默认值,并通过POST表单进行处理。

您的视图模型

class PlaneFormModel
    {
        public string slctplane { get; set; }
        public string Description { get; set; }
        public string SaveInstance { get; set; }
        public string AddInstance { get; set; }
        public string ActivePlane { get; set; }
        public string RestartInstance { get; set; }
        public string GeneratePassword { get; set; }
        public string ResetDB { get; set; }
        public string DelInstance { get; set; }

        public string DropDownValueSelected { get; set; }
        public string List<SelectListItem> DropDownValues { get; set; }
    }

您的HttpGet控制器方法

[HttpGet]
    public ActionResult ClickDetails()
    {
        // set view model with dropdown values, also you can use linq from your list of values
        // also you can set default value for dropdown
        var formModel = new PlaneFormModel
        {
            DropDownValueSelected = "defaultValue", // <---- value
            DropDownValues = new List<SelectListItem>
            {
                new SelectListItem
                {
                    Key = "key",
                    Value = "val"
                }
            }
        };

        return View(formMmodel);
    }

您的HttpPost控制器方法

[HttpPost]
    public ActionResult ClickDetails(PlaneFormModel formModel)
    {
        // bind model from form also you can use FormCollection instead.

        if (!string.IsNullOrEmpty(formModel.DropDownValueSelected))
        {
            ...
        }
        ...
    }

在视图中只需使用剃刀模板助手

@Html.DropDownListFor(m => m.DropDownValueSelected, 
        Model.DropDownValues, 
        "Select plane")

Source 1
Source 2

答案 1 :(得分:0)

这是您的操作方式:

public class TheModel
{
    //Can be string, int, Guid, etc. Usually this is the index key.
    public int SelectedValue {get;set;} 
    public List<SelectListItem> TheList {get;set;}

    public TheModel()
    {
        TheList = new List<SelectListItem>();
    }
}

例如,您有一个带有int类型索引键的模型。您可以从数据库中获取它,并将其插入列表中。

TheModel model = new TheModel();
using(MigrationDB db = new MigrationDB())
{
    model.TheList = db.Plane.Select(m => new SelectListItem()
                    {
                        Value = m.PlaneId.ToString(), //Value can hold only string
                        Text = m.PlaneName //this is the <option>text</option>
                    }.ToList();
}

这是在Razor视图中编写它的方式:

@model TheModel

.....

<form> //You can use Html.BeginForm() to create the form tag.

@Html.DropDownListFor(m => m.SelectedValue, //This will bind the selected option into `SelectedValue` property
                      Model.TheList, //This will fill up your <option> with the value from the list.
                      " Select Plane ", //If no value is selected this option will be selected with the value null
                      new { @class = "custom-class", ...} //Html attribute you want to put here.
                      );

</form>

因此,如果您从下拉框中选择一个选项,则该选项将绑定到SelectedValue属性。

[HttpPost]
public ActionResult PassTheValue(TheModel model) //Pass the entire model
{
    var theSelectedValue = model.SelectedValue;
    ...
}

您应该将整个模型从“ HTML”页面视图传递到控制器中。

Html.BeginForm() source

的引用