asp.net中的HTML模式mvc5

Question

好吧，所以这笔交易是我正在加载一个带有javascript的模态，但它不是很漂亮，我想让它更好看这就是它现在的样子。

这就是用javascript制作模态的方法。

function OpenDialog() {
    ClearDialog();
    $('#dialog').dialog('open');
}

function OpenDialog2(id, projectId, startDate, endDate, pct) {
    ClearDialog();
    $('#projectList').val(projectId);
    $('#startDate').val(startDate);
    $('#endDate').val(endDate);
    $('#pct').val(pct);
    $('#sId').text(id);
    $('#dialog').dialog('open');
}

function ClearDialog() {
    $('#projectList').val('');
    $('#startDate').val('');
    $('#endDate').val('');
    $('#pct').val('');
    $('#sId').text('');
}

$(function () {

    var comment = $("#tbComment"),
        locstring = '?consultantid=@(Request.QueryString["consultantid"])',
        allFields = $([]).add(comment),
        tips = $("#validateTips");

    function validate() {
        var pct = $('#pct').val();
        if (pct !== "" && (pct > 100 || pct < 0))
            return false;
        else
            return true;
    }

    function reloadTable() {
        if (navigator.appName === "Microsoft Internet Explorer") {
            //alert('suck..');
            window.location.reload();
        } else {

            $.ajax({
                type: "GET",
                url: '@(Url.Action("ConsulantTimes"))',
                dataType: "html",
                success: function (data) {
                    $('#dialog').dialog('close');
                    $('#ConsultantTimes').html(data);
                }
            });
        }
    }

    $("#dialog").dialog({
        bigframe: true,
        autoOpen: false,
        height: 220,
        width: 305,
        modal: true,
        buttons: {
            'Spara': function () {

                if (!validate()) {
                    alert('Procent måste vara mellan 0-100');
                    return false;
                }

                locstring = "@(Url.Action("Index"))/Update/?";

                locstring += '&projectId=' + $('#projectList').val();
                locstring += '&startDate=' + $('#startDate').val();
                locstring += '&endDate=' + $('#endDate').val();
                locstring += '&pct=' + $('#pct').val();

                var sid = $('#sId').text();
                if (sid !== "") {
                    locstring += '&id=' + sid;
                    //locstring = "/Delete/" + sid;
                }
                //window.location = locstring;

                $.ajax({
                    type: "GET",
                    url: locstring,
                    dataType: "html",
                    success: function (data) {
                        //alert(locstring);
                        $('#dialog').dialog('close');
                        reloadTable();
                    }
                });

                return true;
            },
            'Avbryt': function () {
                $(this).dialog('close');
            },
            'Ta bort': function () {
                var sid = $('#sId').text();
                if (sid !== "") {
                    locstring = "@(Url.Action("Index"))/Delete/" + sid;
                    //locstring += '&delete=true&id=' + sid;

                    $.ajax({
                        type: "GET",
                        url: locstring,
                        dataType: "html",
                        success: function (data) {
                            $('#dialog').dialog('close');
                            reloadTable();
                        }
                    });

                }
            }
        },
        close: function () {
            allFields.val('').removeClass('ui-state-error');
        }
    });

我怎么想为没有使用javascript生成的模态进行新设计，我想出了这个。在我看来，它看起来好多了。

这里是HTML。

<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-3 control-label">Projekt:</label>
                    <div class="col-md-3">

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Start Datum:</label>
                    <div class="col-md-3">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Slut Daturm:</label>
                    <div class="col-md-3">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Tid (%)</label>
                    <div class="col-md-3">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Spara</button>
            <button type="button" class="btn btn-primary">Ta bort</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">stäng</button>
        </div>
    </div>
</div>

我希望这种新模式像我的新模态一样。但我不知道如何改变它，所以我的新模态将获得与使用javascript代码生成的值相同的值。

我将如何获得新模式的下拉等？