0

私は最後の 4 つのタスクの 1 つが注文を行うプロジェクトに取り組んでいます。必要な場所にボタンを表示することに行き詰まりました。私はこれに本当に緑色で、正直に言うと、自分のニーズを説明するのに苦労しています. しかし、私はそれを最善を尽くします。

写真を投稿したかったのですが、必要な評判レベルのため、それはオプションではありません。それは本当に私が欲しいものと必要なものを簡単に説明するでしょう.

どのように見えるかを説明しようと思います。製造番号、名前、価格の 3 つの列のテーブルがあります。製品に関するデータを適宜表示する列の全員。ここで必要なのは、価格用とリベート用の 2 つの入力です。リスト内のすべての製品のボタンも必要です。

これは代表的なものです。

Prod.no    Name      Price
100        Laser     199     [Input for own price]   [input for rebate]  (Button submit)

単純に td を使用して、入力とボタンのコードを追加できると思っていましたが、うまくいきませんでした。それが達成できるかどうかさえわかりません。

誰でもこれを行う方法を提案できますか? 私がグーグルまたはSOで試したすべての例は、私が望む場所ではなく、常にテーブルの一番上に表示されます。

責任のある cshtml ファイルとコードの一部を次に示します。

model ListModel

@{
IEnumerable<Incendo.Core.Domain.External.ExternalAttribute> cols = (IEnumerable<Incendo.Core.Domain.External.ExternalAttribute>)Model.Aggregates;
}

@if (EngineContext.Current.Resolve<IWorkContext>().WorkingCustomer != null)
{
<div class="customerProducts">
    @if (EngineContext.Current.Resolve<IWorkContext>().WorkingCustomer.CreditDenied == 1)
    {
        <p class="field-validation-error">Kreditspärr - orderläggning ej möjlig</p>
    }
    else
    {

    var columnIds = cols.Select(m => m.ColumnId).ToList();
    var colNames = cols.Select(m => m.Name).ToList();

    var grid = new WebGrid(
        source: Model.Data,
        columnNames: colNames
        );

    var outString = String.Empty;

    var values = cols.Select(m => m.ExternalAttributeValues).FirstOrDefault();
    if(values != null)
    {
    outString += "<table>";
    var totalCount = values.Count;
    outString += "<thead>";
    outString += "<tr>";
    foreach(var name in colNames)
    {
        if (name != "Prod. typ")
        {
            outString += "<th>" + name + "</th>";

        }            
    }
    //outString += "<th>" + "Beställning" + "</th>";

    outString += "</tr>";
    outString += "</thead>";
    outString += "<tbody>";

    for(int row = 0; row < values.Count; row++)
    {

        outString += "<tr>";
        for (int name = 0; name < columnIds.Count; name++)
        {
            var col = cols.SingleOrDefault(m => m.ColumnId == columnIds[name]);
            if (col.Column.TextTypeNo > 0)
            {
                //outString = outString + String.Format("<td>[{0}] +++ {1}</td>", col.ExternalAttributeKeyValues[row].Key, col.ExternalAttributeKeyValues[row].Value);                        
            }
            else
            {
                outString = outString + String.Format("<td>{0}</td>", col.ExternalAttributeKeyValues[row].Value);                                                
            }                    
        }
        var prodNr = cols.ElementAt(0).ExternalAttributeKeyValues[row].Value;
        //outString += String.Format("<td> <input type=\"submit\" />    {0}</td>", prodNr);
        //outString += String.Format("<td> <input name=\"submit\" type=\"submit\" id=\"submit\" value=\"Lägg\" />    {0}</td>", prodNr);           

        outString += "<td>"
            + "<input type=\"submit\" />"
            +"</td>";

        //outString += "<input type=\"submit\" />";

        outString += "</tr>";
    }
outString += "</tbody>";

outString += "</table>";
}


@Html.Raw(outString)
    }
</div>
}

コードはいくつかの外部属性 (製品番号、名前、価格など) のみを返すため、コードは必要ないと確信しています。私の計画は、製品の ID をボタンの識別子として使用し、そのようにして 2 つの入力を使用することです。 、ユーザーがそれらに何かを書いた場合、注文を行います。

私は Html.BeginForm で何かを見たことがありますが、注文が通過するためには、入力をアクションコントローラーとボタンクリックを担当するアクションメソッドに渡す必要があると信じています。

うまくいけば、誰かが私が間違っている場所にヒントを与えることができます. これがそのような問題であるべきだとは思いませんが、私はこれらすべてに慣れていません。

以下はすべての出力です。

<!DOCTYPE html>
<html class="ui-mobile">
<head>
    <meta charset="utf-8" />
    <title>Details</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/fastclick.min.js" type="text/javascript"></script>
    <link href="/Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/kendo.all.min.js" type="text/javascript"></script>
    <script src="/Scripts/kendo.aspnetmvc.min.js"></script>
    <script src="/Scripts/Mobile/Incendo.UI.Menu.js" type="text/javascript"></script>
    <script src="/Scripts/public.common.js" type="text/javascript"></script> 
    <script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <link href="/Content/Layout.css" rel="stylesheet" type="text/css" />
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <menu id="menu">
        <ul class="t-widget t-reset t-header t-menu" id="Admin"><li class="t-item t-state-default"><span class="t-link">Mina sidor<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/">Dashboard</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Produkter<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Product/List">Produkter</a></li><li class="t-item t-state-default"><a class="t-link" href="/Product/Search">S&#246;k produkt</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Leverant&#246;rer<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Supplier/List">Leverant&#246;rer</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Kunder<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Customer/List">Kunder</a></li><li class="t-item t-state-default"><a class="t-link" href="/Customer/Create">Ny kund</a></li><li class="t-item t-state-default"><a class="t-link" href="/Customer/Search">S&#246;k kund</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">F&#246;rs&#228;ljning<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Orders/List">S&#246;k order</a></li><li class="t-item t-state-default"><a class="t-link" href="/ShoppingCart/Cart">Aktuell order</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Inst&#228;llningar<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Settings/Customer">Kund</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Anv&#228;ndare<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/User/List">Anv&#228;ndare</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">System<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Common/SystemInfo">Systeminformation</a></li><li class="t-item t-state-default"><a class="t-link" href="/Common/ClearCache">Rensa cache</a></li><li class="t-item t-state-default"><a class="t-link" href="/Common/RestartApplication">Starta om applikation</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Mina inst&#228;llningar<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/User/Settings">Inst&#228;llningar</a></li><li class="t-item t-state-default"><a class="t-link" href="/Account/Logout">Logga ut</a></li></ul></li></ul><script type="text/javascript">
//    $(document).ready(function () {
//        $("#Admin").kendoMenu();
//    });
</script>
    </menu>
    <section id="pagebody" data-role="page" class="pages ui-page ui-body-c ui-page-active container" id="home" data-url="home">

    <div data-role="header" class="ui-header ui-bar-a" role="banner">
            <a href="#" class="showMenu" data-theme="a">Menu</a>
            <div class="login-info">
                <div class="clearfix"></div>
            </div>
        </div>

<div id="dialog-notifications-success" title="Common.Notification" style="display:none;">
</div>
<div id="dialog-notifications-error" title="Fel" style="display:none;">
</div>
<div id="bar-notification" class="bar-notification">
    <img src="/Content/Images/ico-close-notification-bar.png" class="close" alt="Close" title="Close" />
</div>
                    <div data-role="content-header" class="">
            <div class="userinfobar">
            <h1>UserInfoBar.cshtml</h1>
            <form action="/Common/FirmSelected?Length=6" data-ajax="true" data-ajax-complete="onFirmChangedRequestCompleted();" id="form-firmselector" method="post"><select id="userfirm" name="userfirm" onChange="onFirmChanged();"><option value="3">F0002 - BB</option>
<option selected="selected" value="1">F0001 - BB AB</option>
</select></form>    <script type="text/javascript">
        function onFirmChanged() {
            $("#form-firmselector").submit();
        }
        function onFirmChangedRequestCompleted() {
            location.reload();
        }
    </script>

0                 <div id="workingCustomerSection-active">
                    <p>Aktuell kund</p>

                        <p><a href="/Customer/Details/100001">Cykellagret AB</a></p>


                    <a class="button" data-ajax="true" data-ajax-method="Post" data-ajax-success="clearWorkingCustomerSuccess" href="/User/ClearWorkingCustomer/0">Anv&#228;nd inte aktuell kund</a>
<script type="text/javascript">
    function clearWorkingCustomerSuccess(e) {
        handleResponse(e);
        location.reload();
    }
</script>
                </div>
            </div>                        
                    </div>
        <div data-role="content" class="ui-content" role="main">
            <div class="ajax-loading-block-window" style="display: none">
                <div class="loading-image">
                </div>
            </div>
            <h2>Cykellagret AB</h2>

<section id="custhead" class="clearfix">    
    <dl class="table-display">
        <dt>Kundnr</dt>
        <dd>100001</dd>
        <dt>Adress</dt>
        <dd>Strandv&#228;gen 4</dd>
        <dt>Telefonnr</dt>
        <dd>99887766</dd>
    </dl>
</section>
<h1>Details.cshtml</h1>
<div id="buttonbar">


<a class="button" data-ajax="true" data-ajax-method="Post" data-ajax-success="clearWorkingCustomerSuccess" href="/User/ClearWorkingCustomer/0">Anv&#228;nd inte aktuell kund</a>
<script type="text/javascript">
    function clearWorkingCustomerSuccess(e) {
        handleResponse(e);
        location.reload();
    }
</script><a href="tel:99887766" class="phone button">Ring</a>
</div>

<div id="tabStrip">
    <ul>
        <li>Leveransinfo</li>        <li>Kundgrupp</li>        <li>S&#228;ljare</li>        <li>Kontaktpersoner</li>        <li>Sortiment</li>        <li>Avtal</li>        <li>&#214;ppna kundposter</li>        <li>Aktiviteter</li>        <li>Produkter</li>    </ul>
    <div class="clearfix">
        <dl class="table-display">
            <dt>Ledtid</dt>
            <dd></dd>
            <dt>Leveransdagar</dt>
            <dd></dd>
            <dt>Orderstopptid</dt>
            <dd></dd>
            <dt>Namn</dt>
            <dd>Cykellagret AB</dd>
            <dt>3PL Kundnummer</dt>
            <dd></dd>
            <dt>3PL Status</dt>
            <dd></dd>
            <dt>Kreditsp&#228;rr</dt>
            <dd>0</dd>
        </dl>               
    </div>
    <div class="clearfix">
        <dl class="table-display">
            <dt>Kedjetillh&#246;righet</dt>
            <dd></dd>
            <dt>Kategori</dt>
            <dd></dd>
            <dt>Kundstatus</dt>
            <dd></dd>
            <dt>Kundkategori</dt>
            <dd></dd>
        </dl>               
    </div>
    <div class="clearfix">
        <dl class="table-display">
            <dt>S&#228;ljare</dt>
            <dd>120</dd>
            <dt>Senaste kontakt</dt>
            <dd></dd>
        </dl>               
    </div>
    <div class="clearfix">

    <button type="button" id="createContactButton">Ny kontaktperson</button>
    <table id="contacts">
        <thead>
            <tr>
                <th>Namn</th>
                <th>Telefon</th>
                <th>Email</th>
            </tr>
        </thead>
        <tr>
            <td>Marie H&#246;ljer</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Carl von Friesenwind</td>
            <td></td>
            <td></td>
        </tr>
    </table>
<div id="createContactWindow"></div>
    <script type="text/javascript">
        $(function () {
        var btn = $("#createContactButton");
        btn.click(
        function(){
            initKendoWindow();
            var window = $("#createContactWindow").data("kendoWindow").open();
            window.center();
            window.refresh('/Customer/CreateContactPerson/1001');
            btn.hide();
        });
        var onClose = function () {
            btn.show();
        }
        function initKendoWindow() {
            if (!$("#createContactWindow").data("kendoWindow")) {
                $("#createContactWindow").kendoWindow({
                    title: 'Skapa kontaktperson',
                    visible: false,
                    modal: true,
                    close: onClose
                }).data("kendoWindow");
            }
        }
    })
        </script>


            </div>
    <div class="clearfix">
    <p>Assortment.NoAssortment</p>
    <script type="text/javascript">
        $(function () {
            $(".assortmentbox").change(function (e) {
                $.ajax({
                    type: "POST",
                    data: JSON.stringify({
                        customerNo: 100001,
                        family: this.id.split('_')[0],
                        status: this.id.split('_')[1],
                        enabled: this.checked
                    }),
                    url: "/Assortment/ChangeStatus",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {

                    }
                });
            });
        });
    </script>    </div>
    <div class="clearfix">
        <dl class="table-display">
            <dt>Avtal med</dt>
            <dd></dd>
            <dt>Till datum</dt>
            <dd>0</dd>
            <dt>Grossist</dt>
            <dd></dd>
            <dt>Bryggeri</dt>
            <dd></dd>
        </dl>               
    </div>
    <div class="clearfix">


<table><thead><tr><th>Fakt. nr</th><th>Reg. datum</th><th>Belopp</th><th>Restbelopp</th><th>Förf. datum</th></tr></thead><tbody><tr><td class="field-validation-error">98500040</td><td class="field-validation-error">20080924</td><td class="field-validation-error">3664,05</td><td class="field-validation-error">3664,05</td><td class="field-validation-error">20081004</td></tr><tr><td class="field-validation-error">98500029</td><td class="field-validation-error">20080716</td><td class="field-validation-error">13591,23</td><td class="field-validation-error">13591,23</td><td class="field-validation-error">20080726</td></tr><tr><td>98500002</td><td>20081211</td><td>918,75</td><td>918,75</td><td>20130801</td></tr><tr><td class="field-validation-error">98100148</td><td class="field-validation-error">20081222</td><td class="field-validation-error">281288</td><td class="field-validation-error">281288</td><td class="field-validation-error">20070121</td></tr><tr><td class="field-validation-error">98100120</td><td class="field-validation-error">20081009</td><td class="field-validation-error">6638</td><td class="field-validation-error">6638</td><td class="field-validation-error">20081108</td></tr></tbody></table>    </div>
    <div class="clearfix">

<button type="button" id="createAppointmentButton" class="button">Ny aktivitet</button>
<div id="window"></div>
Inga aktiviteter ännu på kunden<script type="text/javascript">
    $(function () {
        var btn = $('#createAppointmentButton');
        btn.click(
        function () {
            initKendoWindow();
            var window = $("#window").data("kendoWindow").open();
            window.center();
            window.refresh('/Appointments/CreateAppointment/100001/');
            btn.hide();
        });
        var onClose = function () {
            btn.show();
        }
        function initKendoWindow() {
            if (!$("#window").data("kendoWindow")) {
                $("#window").kendoWindow({
                    title: 'Skapa aktivitet',
                    visible: false,
                    modal: true,
                    close: onClose
                }).data("kendoWindow");
            }
        }
    })
</script>    </div>
    <div class="clearfix">


    <div class="customerProducts">
<table><thead><tr><th>Prod. nr</th><th>Namn</th><th>Pris</th></tr></thead><tbody><tr><td>1000</td><td>PRODUKT LAGERFÖRD (MALL)</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1010</td><td>PRODUKT EJ LAGERFÖRD (MALL)</td><td>0</td><td><input type="submit" /></td></tr><tr><td>11</td><td>Celerifere</td><td>0</td><td><input type="submit" /></td></tr><tr><td>111</td><td>Framhjul, komplett modell landsväg</td><td>0</td><td><input type="submit" /></td></tr><tr><td>112</td><td>Framhjul, komplett modell mountain</td><td>0</td><td><input type="submit" /></td></tr><tr><td>113</td><td>Bakhjul, komplett modell landsväg</td><td>0</td><td><input type="submit" /></td></tr><tr><td>114</td><td>Bakhjul, komplett modell mountain</td><td>0</td><td><input type="submit" /></td></tr><tr><td>115</td><td>Mono-hjul</td><td>0</td><td><input type="submit" /></td></tr><tr><td>12</td><td>Sauerbronn</td><td>0</td><td><input type="submit" /></td></tr><tr><td>121</td><td>Ram, landsväg</td><td>0</td><td><input type="submit" /></td></tr><tr><td>122</td><td>Ram, mountain</td><td>0</td><td><input type="submit" /></td></tr><tr><td>123</td><td>Ram, mono</td><td>0</td><td><input type="submit" /></td></tr><tr><td>13</td><td>Vector</td><td>0</td><td><input type="submit" /></td></tr><tr><td>131</td><td>Kraftöverföringspaket Eddy</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1311</td><td>Pedal</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1312</td><td>Kedja</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1313</td><td>Kugghjul</td><td>0</td><td><input type="submit" /></td></tr><tr><td>132</td><td>Kraftöverföringspaket Alfredo</td><td>0</td><td><input type="submit" /></td></tr><tr><td>133</td><td>Kraftöverföringspaket Harry</td><td>0</td><td><input type="submit" /></td></tr><tr><td>134</td><td>Kraftöverföringspaket mono</td><td>0</td><td><input type="submit" /></td></tr><tr><td>141</td><td>Styranordning Leon</td><td>0</td><td><input type="submit" /></td></tr><tr><td>142</td><td>Styranordning Drais</td><td>0</td><td><input type="submit" /></td></tr><tr><td>143</td><td>Styranordning Karl</td><td>0</td><td><input type="submit" /></td></tr><tr><td>151</td><td>Sadel Gösta</td><td>0</td><td><input type="submit" /></td></tr><tr><td>152</td><td>Sadel Bernt</td><td>0</td><td><input type="submit" /></td></tr><tr><td>153</td><td>Sadel Ronaldo</td><td>0</td><td><input type="submit" /></td></tr><tr><td>154</td><td>Sadel mono</td><td>0</td><td><input type="submit" /></td></tr><tr><td>161</td><td>Dekalpaket Celerifere</td><td>0</td><td><input type="submit" /></td></tr><tr><td>162</td><td>Dekalpaket Sauerbronn</td><td>0</td><td><input type="submit" /></td></tr><tr><td>163</td><td>Dekalpaket Vector</td><td>0</td><td><input type="submit" /></td></tr><tr><td>164</td><td>Dekalpaket Dandy-horse</td><td>0</td><td><input type="submit" /></td></tr><tr><td>165</td><td>Dekalpaket Michaux</td><td>0</td><td><input type="submit" /></td></tr><tr><td>166</td><td>Dekalpaket Singleton</td><td>0</td><td><input type="submit" /></td></tr><tr><td>171</td><td>Pakethållare Backpack</td><td>0</td><td><input type="submit" /></td></tr><tr><td>200</td><td>Debiterbar tid</td><td>0</td><td><input type="submit" /></td></tr><tr><td>201</td><td>Arbetstimmar service</td><td>0</td><td><input type="submit" /></td></tr><tr><td>22</td><td>Michaux</td><td>0</td><td><input type="submit" /></td></tr><tr><td>23</td><td>Singleton</td><td>0</td><td><input type="submit" /></td></tr><tr><td>505</td><td>Testprodukt</td><td>0</td><td><input type="submit" /></td></tr></tbody></table>    </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#tabStrip").kendoTabStrip();
    });
</script>
        </div>
    </section>
</body>
</html>

アップデート：

このコードを追加して欲しいものを手に入れることができましたが、それは確かに醜いです。

outString += "<td>"
            + "<label>Överstyrt pris</label>"
            + "<label>Rabatt (%)</label>"
            + "<input type=\"text\" id=\"overridePrice" + prodNr + "\" value=\"0\" >"
            + "<input type=\"text\" id=\"rebate" + prodNr + "\" value=\"0\" >"
            + "<button type=\"button\" id=\"addOrder" + prodNr + "\" ONCLICK=\"window.location.href=\'/CustomerProducts/AddProductToCart\'\" class=\"button\">Lägg</button>"
            + ""
            +"</td>";

これは、入力フィールドとボタンを必要な場所に表示する唯一の方法です。私はCSSをあまり知らないので、これを行う必要があります。onclick-thing は恐ろしいですが、このアプローチでは ajax や jscript は使用できません。

4

1 に答える 1

0

完全に理解しているかどうかわかりませんが、ページに複数のボタンを配置したい場合は、"input type='submit'" ではなく、button html 要素を使用することをお勧めします。そうすれば、好きなだけ持つことができます。

ボタン要素の詳細については、 http ://www.w3schools.com/tags/tag_button.asp を参照してください。

于 2013-08-01T16:26:54.790 に答える