How to use SiteEdit in DD4T in Tridion - tridion

Question

Can anyone direct me on how to use SiteEdit specific syntax or tags in the Razor template in DD4T code? I have seen Site Edit related classes in it, but could not understand how to use SiteEdit tags in the view where there were some syntax similar to Dreamweaver for example RenderComponentField or tcdl:ComponentField which we used in Dreamweaver. I am very new to DD4T and am using SiteEdit 2009 SP3 and SDL Tridon 2011 SP1.
Thanks in advance.
Update: We have tried the implementation mentioned in the answer but unfortunately we are getting an error when we are accessing the page in proxy stating "Invalid template -The HTML is invalid, probably because your template code produces invalid HTML, such as a p tag inside another p tag. Check your HTML using a validator such as the W3C Markup Validation Service, correct your template, and republish."
I guess this is because Xml content is being pushed into html page due to the use of Dynamic Page and Component TBBs which we used in our Component and Page Templates.
Let us kow how to continue further.

Answer 1

The SiteEdit markup is not generated like it is done in a Dreamweaver Template, you are responsible yourself to place the markup for your editable fields in the Razor view. Good thing for this is that it works for similar for SiteEdit 2009 SP3 and UI 2012. Downside for UI 2012 is that it is not listening (yet) to the Enable Inline Editing which you can set on the Component or Page Templates (something we should consider for a future DD4T version).
Everything is based on the DD4T SiteEditHelper class. You start in your page view (before the </body> tag) by placing the following call:
#Html.SiteEditPage(Model)
This will write out the page markup, and if you set the style to "SiteEdit2012" in your SiteEdit_config.xml it will also write out the bootstrap script required for UI 2012.
Then for every Component Presentation and every editable Component Field you will also need to add the appropriate markup. For a Component presentation you can use:
#{var ComponentPresentation = ViewBag.ComponentPresentation as IComponentPresentation;}
<div>
#Html.SiteEditComponentPresentation(ComponentPresentation)
</div>
Make sure you write this out inside a DIV or some other element that can mark the boundary of your Component Presentation. For Component Fields a similar story, you can use:
<div>
#Html.SiteEditField(Model, Model.Fields["FieldName"])
#Model.Fields["FieldName"].Value
</div>

Answer 2

Apart from the changes to your views, as Bart has described, you also need to put a configuration file in the root of your web application, called SiteEdit_config.xml. It should look like this:
<?xml version="1.0" encoding="utf-8" ?>
<siteEdit enabled="true" tridionHostUrl="http://tridion.my.com">
<contextPublications>
<contextPublication id="10" componentPublication="3" pagePublication="9" publishPublication="10" />
<contextPublication id="11" componentPublication="3" pagePublication="9" publishPublication="11" />
</contextPublications>
</siteEdit>
You must list all your active publications here. DD4T tries to match your current page to the correct context publication (based on the 'id' attribute). If it cannot find it, SiteEdit will be disabled. The other attributes allow you to control the behaviour of SiteEdit.
componentPublication: new components will be created here
pagePublication: new pages will be created here (not used in Tridion UI 2012)
publishPublication: pages and components will be republished from this context (usually coincides with the id)
DD4T can also easily be configured for use with Tridion UI 2012. Just change the first element in the configuration as follows:
<?xml version="1.0" encoding="utf-8" ?>
<siteEdit enabled="true" style="SiteEdit2012" tridionHostUrl="http://tridion.my.com">
...
</siteEdit>