قوالب عميل ASP.NET AJAX 4.0، كيفية ربط تحديد؟

StackOverflow https://stackoverflow.com/questions/1500942

سؤال

أحاول إنشاء شبكة AJAX بسيطة تسمح لي بإضافة وإزالة الصفوف وأيضا تحرير بعض الأعمدة ولديها أعمدة أخرى محسوبة بناء على الإدخال في الآخرين. اعتقدت أن هذا سيكون oppurtunity لطيفة للعب مع ASP.NET AJAX 4.0 وقوالب العميل. إنه يعمل بشكل جيد ولكن لا يمكنني العثور على طريقة لربط بيانات JSON الخاصة بي إلى أ. كيف يمكنني أن أفعل هذا؟

القالب العادي يشبه هذا

<div id="authorsTemplate" style="visibility:hidden;display:none;"> 
    <ul> 
        <li>First Name: {{ FirstName }}</li> 
        <li>Last Name: {{LastName}}</li> 
        <li>Url: <a href="{{Url}}">{{Url}}</a></li> 
    </ul> 
</div>

كيف يمكنني استخدام بناء جملة ربط البيانات مع منسدلة 

<select id="">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

تحرير: إذا كانت علامة المختارة كان لها سمة قيمة، فإن الحل الواضح سيكون. EDIT2: كان بناء الجملة أدناه هو في الواقع الحل، THX Roatin، لم يكن لدي أي فكرة عن تحديد سمة قيمة في الواقع.

<select id="" value="{binding nr}">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

يمكن أن استخدم JavaScript مخصص لتعيين الخيار المحدد ولكن النقطة هي ملزمة حية كائن JSON الخاص بي بنفس الطريقة التي ترتبط بها قيمة علامة الإدخال

هل كانت مفيدة؟

المحلول

أنا لا أريد ملء المنسدلة، يتم ملؤها بالفعل. أريد أن أكون قادرا على استخدام بناء جملة ملزم قالب العميل للحصول على القيمة من كائن JSON الخاص بي وتعيين العنصر المحدد.

حقيقة، select عناصر الدوم فعل عند value خاصية (ولكن غير مكشوف كعمة في العلامة). وضعه يعادل (وأسرع من) تكرار الطفل <option>S وتعيين selectedIndex إلى فهرس الخيار الذي تم العثور عليه الخيار الذي يحتوي على مطابقة value.

على أي حال، إليك كيفية ربطها مباشرة Sys.Binding (حالة اختبار كاملة):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">.sys-template {display:none}</style>
    <script src="MicrosoftAjax.debug.js"></script>
    <script src="MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">
    var dataItem = { Foo: '3' };
    function pageLoad()
    {
        $create(Sys.Binding, {
            target: $get("list"),
            targetProperty: 'value',
            source: dataItem,
            path: 'Foo',
            mode: Sys.BindingMode.twoWay
        });
    }
    </script>
</head>
<body>
  <select id="list">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</body>
</html>

فيما يلي كيفية القيام بنفس الشيء بشكل تصريح، إذا كنت تفضل:

<body xmlns:sys="javascript:Sys"
      xmlns:binding="javascript:Sys.Binding"
      sys:activate="*">

  <select id="list"
    sys:attach="binding"
    binding:target="{{ $get('list') }}"
    binding:targetproperty="value"
    binding:source="{{ dataItem }}"
    binding:path="Foo">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

(وبالطبع تخلص من pageLoad جافا سكريبت الاشياء ...)

كلا الأمثلة إعداد ملزمة في اتجاهين dataItem هدف. يمكنك معرفة متى يتم تحميل الصفحة، والثالث <option> يتم تحديد هذا هو الخيار مع مطابقة القيمة dataItem.Foo. وبعد عند تحديد عنصر مختلف من القائمة المنسدلة، dataItem.Foo تحديثات مع القيمة الجديدة المحددة.

امل ان يساعد!

نصائح أخرى

أنا لم أحاول في الواقع هذا ولكن يبدو أن أي من هؤلاء ثلاثة روابط وظيفة بلوق يمكن أن تساعد. جميع الأمثلة تظهر ملزمة لقوائم البيانات. ربما شيء مثل هذا:

* عينة لم تختبر بلدي vs 2010 شركات تم ضبطها ومستمدة عن كثب من الرابط الثالث *

var sampleData = [
    { Value: "1", Text: "1" },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}">{{ Text }}</option>
</select>

ثم لتحديد القيمة التي تريدها (أنجزت طريقة القوة الغاشمة)

var list = document.getElementById( "list");
foreach ( var option in list.options)
{
    if( option.value == select)
    {
        option.selected = true;
        break;
    }
}

أو قرص القالب لتضمين ربط خيار "محدد". (لم يتم اختبارها مرة أخرى، قد لا تتمكن من إجراء تحديد === صحيح)

var sampleData = [
    { Value: "1", Text: "1", Selected: true },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}" selected="{{ Selected === true }}">{{ Text }}</option>
</select>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top